Override a:hover with jQuery?
I have defined an <a>
tag with css. I'm trying to stop defau开发者_开发技巧lt stylesheet :hover
changes on the a
tag. How do I disable the hover changes on the a tag in Jquery?
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
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
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
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.
精彩评论