Question

在这里感到困惑。更改下面链接的悬停CSS的最佳方法是什么？如何？ toggle.Class？ add.Class？我想在悬停时显示图像。我已经能够用

更改文本的颜色

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

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

jQuery以CSS为目标：hover类

3 个答案: