jQuery to target CSS a:hover class

Question

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-item-1099" class="menu-item menu-item-type-custom menu-item-1099">
<a href="http://mydomain.com/feed/">rss</a></li>

Answer 1

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");
});

Answer 2

   $('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

Answer 3

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