Question

似乎无法让这个工作：

$(function() {
  $("#side").$("li").each(function() {
    $(this).mouseover(function() {
      $(this).backgroundColor = "#c0c0c0";
    });
  });
});

要迭代的HTML代码段：

<div id='side'>
   <ul>
      <li>A</li>
      <li>B</li>
      <li>C</li>
   </ul>
</div>

Answer 1

请改为尝试：

$(function() {
    $("#side").children("li").each(function() {
        $(this).mouseover(function() {
            $(this).css ("background-Color", "#c0c0c0");
        });
        $(this).mouseout(function () {
            $(this).css("background-Color", "#FFF"); 
        });
    });
});

我看到的问题是：

您用于ul / li的选择器不正确。您需要使用children方法。
在jquery然后javascript中更改css是不同的。请改用css方法。
确保在鼠标离开时将颜色更改回默认值（在本例中为白色）。否则它将始终为灰色（即使鼠标离开）。

JSFiddle：http://jsfiddle.net/L8hsz/
希望有所帮助。

编辑：如果您担心背景颜色，可以执行类似的操作：

$(function() {
    $("#side").children("li").each(function() {
        $(this).data("DefaultBGColor", $(this).css("background-color"));
        $(this).mouseover(function() {
            $(this).css ("background-Color", "#c0c0c0");
        });
        $(this).mouseout(function () {
            $(this).css("background-Color", $(this).data("DefaultBGColor")); 
        });
    });
});

Answer 2

我认为您也可以使用悬停事件：

$(function() {
    $("#side").children("li").hover(
        function() {
            $(this).css ("background-Color", "#c0c0c0");
        },
        function() {
            $(this).css("background-Color", "#FFF"); 
        }
   );
});

Answer 3

只是一个fyi - 对于li阻止悬停效果，你不需要javascript或Jquery，这可以在CSS中100％完成。唯一的例外是你需要使用IE6。

我在上面发表了Ben的评论：

http://jsfiddle.net/stevembrennan/tLZNL/

来自原始示例的标记

1

2

3

要添加的CSS

ul {float:left; left:0; position:absolute; right:auto;  width:auto;}
li {clear:left; float: left; left:auto; margin:0px; width:100%; text-align:left;      display:block; background-color:#00a0e1;}
li a {display:block; padding:4px 10px;}
li a:hover {background-color:red;}

不需要JS

如果您在IE6中需要有关如何执行此操作的帮助，请与我们联系。有一个技巧，你可以在整个事物周围添加一个块元素，它会欺骗悬停进入。为此类迟到的回复道歉。

Jquery每个<li>应用鼠标悬停背景</li>

3 个答案: