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

Question

我正在弄乱这个scroll menu，我希望每个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 ...

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

感谢您的帮助。

link to the demo and download

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的颜色。