使用鼠标悬停和鼠标移出更改背景颜色

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设置颜色。