jQuery 定位 CSS a:hover 类

Question

这里很困惑。更改下面链接的悬停 CSS 的最佳方法是什么？如何？切换.类？添加类？我想在悬停时显示图像。我已经能够更改文本的颜色

$("#menu-item-1099 a:contains('rss')").css("color", "#5d5d5d");

，但似乎无法针对悬停类。

<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

当您在 jQuery 中使用 .css() 时，您实际上并没有更改 CSS 文件/创建新的 CSS 规则。您只需将 CSS 添加到特定元素的 style 属性（内联 CSS）即可。

因此，您不能“定位悬停类” - 您必须在悬停时执行某些操作，并在悬停时恢复该操作：

$("#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');
                }
            });

这是简单的制作方法。当鼠标悬停时可以显示图像，当鼠标移开时可以删除图像

Answer 3

你可以在元素上使用 .hover ，像这样

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

如果你想使用 .toggle()

$("#menu-item-1099 a:contains('rss')").hover(function(){
          $(this).toggleClass(list the class);
                }); 

你只需要在样式表上创建一个类，将背景设为你想要的图像，然后把它放在这里