Javascript 更改没有ID的特定实例

好的，假设我在一个页面上有多个链接，我希望链接在滚动时改变背景颜色。我将使用以下代码：

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

此代码的问题是，当您滚动一个a时，所有链接的颜色都会改变。我可以给每个人一个特定的ID，并为每个人创建一个特定的函数，但有没有更有效的方法来做到这一点？

---

编辑：此外，我可以做些什么来将原始背景色设置回原来的颜色。如果我将背景恢复为白色，它可能一开始就不是白色的。如何解决此问题？

在您的版本中，您可以使用

$（'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');
    });
});

---

在您的版本中，可以使用

$（'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');
    });
});

---

你要知道，你们都在经历漫长而艰难的过程

// 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;
}​

---

正如你所知，你们都在经历漫长而艰难的过程

// 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的

a:hover{background color:black；}

。但也许你不仅仅是想在悬停链接时改变风格。此外，您不需要/不想将每一位代码都包装在

$（function（）{…}）中。只需将其全部封装在一个文件中。对于这个特定任务，我将使用css的
a:hover{background color:black；}
。但也许你不仅仅是想在悬停链接时改变风格。此外，您不需要/不想将每一位代码都包装在
$（function（）{…}）中。把它全部包起来。请解释一下为什么这样做。我知道为什么会这样，就像其他很多人一样，但这对OP来说可能并不明显。谢谢，这太完美了。这正是我想要的杰姆，我想我明白了。我认为“这”一词是针对a。是吗？是的，你是对的。我在回答中解释了这一点。感谢JamWaffles指出了这个明显的缺点。我还有一个小问题。假设背景色最初不是白色。有没有一种方法可以让我把背景设置成原来的样子，不管之前的背景颜色是什么？请解释一下为什么会这样。我知道为什么会这样，就像其他很多人一样，但这对OP来说可能并不明显。谢谢，这太完美了。这正是我想要的杰姆，我想我明白了。我认为“这”一词是针对a。是吗？是的，你是对的。我在回答中解释了这一点。感谢JamWaffles指出了这个明显的缺点。我还有一个小问题。假设背景色最初不是白色。有没有一种方法可以让我把背景设置成原来的样子，不管之前的背景颜色是什么？