views:

3947

answers:

6

I have a small problem with a script. I want to have a default action on :hover for those with javascript disabled but for those with javascript enabled i want another action (actually... same action, but i want to add a small transition effect).

So... How can i do this? I am using jquery.

+10  A: 

Apply two classes to the relvant element. one contains the hover behaviour, and one contains all the other styling.

You can then use the jquery

$(element).removeClass('hover');

method to remove the class with the hover behaviour and then apply whatever you want using

$(element).bind('mouseover', function () { doSomething(); });
$(element).bind('mouseout', function () { doSomething(); });
benlumley
yeah, but this method is very obtrusive :( i want smth not so intrusive :-s
Ionut Staicu
not quite sure what you mean by obtrusive?
benlumley
i have to modify way to much code to achieve this. But... i think reverse will work too:add a class :D 10x (a huge ray of light above my head just appeared!)
Ionut Staicu
+2  A: 

I think the best approach would be to leave the :hover behavior as a fall-back for non-javascript users and then use JQuery to create mouseover and mouseout event handlers to create a different effect for javascript-enabled users.

JQuery Javascript Library - Events/mouseover

Andrew Hare
+7  A: 

How about putting the :hover fall-back in a stylesheet that is only loaded if javascript is disabled?

<noscript>
  <link href="noscript.css" rel="stylesheet" type="text/css" />
</noscript>
foxy
Great answer... I would pick this.
Renesis
Nice but invalid XHTML markup. <link>-Tag must be in `head`, <noscript> tag must be in `body`. Since HTML5, noscript is allowed to be in `head` therefore the markup is valid HTML5 and may not be an issue.
mre
A: 

I HAVE FOUND YOUR SOLUTION

basically you start out by redefining what you did with the css hover. (naturally you would do this by dynamically pulling the information from the style) then do whatever you want to in jquery with mouseover/mouseout events

this allows you to keep the :hover event in your css because jquery is binding your original styles to the element. In essence disabling the :hover event.

if your css is:

a.class {
  background-color: #000000;
  background-position: 0 0;
  }
a.class:hover {
  background-color: #ffffff;
  background-position: 100% -50px;
  }

your jquery would be somthing like:

jQuery("a.class").each(function () {

  var oldBackgroundColor = jQuery(this).css("backgroundColor");
  var oldBackgroundPosition = jQuery(this).css("backgroundPosition");

  jQuery(".class").css({
        'backgroundColor':oldBackgroundColor,
        'backgroundPosition':oldBackgroundPosition
  });

})
.bind("mouseover", function() {

  doSomething();

})
.bind("mouseout", function() {

  doSomething();

})
Chico Web Design
A: 

You can globally enable behavior across the entire document by using a single css rule, and then disable that rule in one statement in javascript, while installing the new event handler.

Add a class to your html body tag:

<html>
  <body class="use-hover">
  ...

Default behavior in your css, let's say to bold links on hover:

body.use-hover a:hover
  font-weight: bold

And in your js, when run will remove the default behavior and do something else:

$(function() {
  $('body').removeClass('use-hover');
  $('a').live('mouseover', function() {
    // Do something when hovered
  }).live('mouseout', function() {
    // Do something after hover is lost
  });
});
fullware
A: 

Here is a solution without hack classes:

CSS:

a {color: blue;}
a:hover {color: red;}

jQuery (uses jQueryUI to animate color):

$('a').hover( 
  function() {
    $(this)
      .css('color','blue')
      .animate({'color': 'red'}, 400);
  },
  function() {
    $(this)
      .animate({'color': 'blue'}, 400);
  }
);

demo

kingjeffrey