Question

好吧，假设我在页面上有多个链接，并且我希望链接在您翻转时更改背景颜色。我会使用这段代码：

$(function() {
    $('a').mouseover(function() {
        $('a').css('background-color', 'black');
    });
}); 
$(function() {
    $('a').mouseleave(function() {
        $('a').css('background-color', 'white');
    });
});

此代码的问题在于，当您翻转一个a时，所有链接都会改变颜色。我可以给每个人一个特定的ID，并为每个ID创建一个特定的功能，但是有更有效的方法吗？编辑：此外，我该怎么做才能将原始背景颜色设置回原来的样式。如果我将背景变回白色，那么它可能不是白色的。我怎么能解决这个问题？

Answer 1

在您的版本中，您使用$('a')来调用.css()功能。问题是$('a')选择页面上的所有节点，而不仅仅是您移动鼠标的节点。在mouseover回调函数中，this关键字引用作为事件发起者的节点。因此，当您在该函数中执行$(this)时，您将创建该节点的jQuery对象（称为包装集）。现在你可以调用它上面的所有jquery函数，不包括.css()函数。所以你走了：

$(function() {
    $('a').mouseover(function() {
        $(this).css('background-color', 'black');
    });
}); 
$(function() {
    $('a').mouseleave(function() {
        $(this).css('background-color', 'white');
    });
});

Answer 2

就这样你知道，你们都是漫长而艰难的一切。

// this is like document.onload = function, 
//  this only needs to be called once, you can put 
//  all your jQuery in this one function
$(function() {
    // the following is a call to all `a` links to add jQuery's own .hover function
    // see -> http://api.jquery.com/hover/
    $("a").hover(function(eIn) { // this first function is the action taken when
                                 // user hovers over the link
        $(this).css({ 'background-color': '#000', 'color': '#fff' });
    }, function(eOut) { // this second function is what happens 
                        // when user hover away from the link
        $(this).css({ 'background-color': '', 'color': '' });
    });
});

See WORKING Fiddle

此外，您不需要使用JQUERY，使用CSS

在CSS中：

a:hover {
    background-color: #000;
    color: #fff;
}

See it in CSS ONLY HERE

更改没有ID的特定实例

2 个答案: