Override a:hover with jQuery?

Question

I have defined an <a> tag with css. I'm trying to stop default stylesheet :hover changes on the a tag. How do I disable the hover changes on the a tag in Jquery?

Answer 1

Live demo of the following solution: http://jsbin.com/umiru

--

The easiest way I can think of is to change:

a:hover { ... }

into

a.someClass:hover { ... }

And then add/remove .someClass via jQuery's methods:

$(this).addClass("someClass");    // activates css rules for :hover
$(this).removeClass("someClass"); // deactivates css rules for :hover

Answer 2

The easiest way would be to create a new CSS rule for the specific a tag. Something like

a.linkclass:hover {color:samecolor}

If you have to use JQuery to override the default styles, you have to manually add the css rules in the hover state, something like this:

$('a.linkclass').hover(function(){
    $(this).css({'color':'samecolor'});
});

hope this help

Answer 3

Just define your CSS without a "a:hover"

a { color: #fffff }

This CSS will override the a:link, a:hover, a:visited and a:active.

Answer 4

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