jQuery to target CSS a:hover class
Confused here. What's the best way to change the hover CSS of the link below, and how? toggle.Class? add.Class? I want to show an image on hover. I have been able to change the color of the text with
$("#menu-item-1099 a:contains('rss')").css("color", "#5d5d5d");
but can't seem to target the hover class.
<div id="access">
<div class="menu-header">
<ul id="menu-main-menu" class="menu">
<li id="menu-ite开发者_如何学编程m-1099" class="menu-item menu-item-type-custom menu-item-1099">
<a href="http://mydomain.com/feed/">rss</a></li>
When you use .css()
in jQuery, you're not actually changing the CSS file / creating new CSS rules. You're simply adding CSS to specific elements' style
attribute (inline CSS).
So, you can't "target the hover class" - you have to do something on hover in, and revert that on hover out:
$("#menu-item-1099 a:contains('rss')").hover(function() {
// Hover in, show an img
$(this).after("<img src='blah.jpg'>");
// Or alternatively
$(this).addClass("hasImage"); // Where there is a CSS rule for .hasImage
}, function () {
// Hover out, remove the img
$(this).next().remove();
// Or alternatively
$(this).removeClass("hasImage");
});
$('a:contains('rss')').live('mouseover mouseout', function (event) {
if (event.type == 'mouseover') {
$(this).css('background-color', '#FFFF99');
} else {
$(this).css('background-color', '#FFFFFF');
}
});
it is simple way to make it. when mouseover you can show your image, whne mouseout you can remove your image
You can use .hover on the element, like this
$("#menu-item-1099 a:contains('rss')").hover(function(){
//change the bacjgound picture
$(this).addClass("all the class");
}, function(){
//remove it
$(this).removeClass("all the class");
});
if you want to use .toggle()
$("#menu-item-1099 a:contains('rss')").hover(function(){
$(this).toggleClass(list the class);
});
you only need to create a class on your style sheet, make the background the image you want, and put it here
精彩评论