0

好的，假设我在一个页面上有多个链接，我希望链接在您滚动它们时改变背景颜色。我会使用这段代码：

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

这段代码的问题是，当你翻过一个 a 时，所有的链接都会改变颜色。我可以给每个人一个特定的 ID 并为每个人创建一个特定的功能，但是有没有更有效的方法来做到这一点？编辑：此外，我可以做些什么来将原始背景颜色设置回原来的样子。如果我把背景变回白色，它可能一开始就不是白色的。我该如何解决这个问题？

4

2 回答 2

4

在您的版本中，您用于$('a')调用该.css()函数。问题是$('a')选择页面上的所有 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');
    });
});
于 2012-04-16T22:26:24.927 回答
1

只是让你知道，你们都在漫长而艰难的道路上前进。

// 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': '' });
    });
});

见工作小提琴

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

在 CSS 中：

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

仅在此处查看 CSS

于 2012-04-16T22:45:42.927 回答