javascript - 使用 mouseover 和 mouseout 更改背景颜色

Question

我正在搞乱这个滚动菜单，我希望每个菜单都li更改为不同的颜色而不是相同的颜色。

var colorOver = '#31b8da';
var colorOut = '#1f1f1f'; 

但这会改变所有人的颜色。

html 看起来像这样：

<div id="sidebar">
    <ul id="menu">
        <li id="first"><a href="#">blog <span> / 2012</span></a></li>
        <li id="second"><a href="#">me <span> / 2012</span></a></li>
        <li id="third"><a href="#">etc <span> / 2012</span></a></li>
        <li id="fourth"><a href="#">etc <span> / 2012</span></a></li>
        </ul>
    </div>

我假设你只是告诉它id...

希望我已经提供了足够的信息。

谢谢你的帮助。

链接到演示和下载

Answer 1

您可以修改您的 css 为每个 li 设置 colorOver 和 colorOut 类，例如：

.first.colorOver { background-color: #31b8da; } 
.first.colorOut { background-color: #1f1f1f; }

并使用 Francois Wahl 的 toggleClass 选项：

 $("#sidebar ul#menu li").on("hover", function(){
     $(this).toggleClass("colorOver", "colorOut");
 });

然后您可以轻松地为每个 li 设置颜色。