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

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"); 
        });
    });
});​

我看到的问题是:

1. 您用于 ul/li 的选择器不正确。您需要使用 child 方法。
2. 更改 css 在 jquery 中与在 javascript 中不同。请改用 css 方法。
3. 确保当鼠标离开时将颜色更改回默认值(在本例中为白色)。否则它将永远是灰色的(即使鼠标离开)。

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")); 
        });
    });
});​