javascript - マウスオーバーとマウスアウトで背景色を変更する

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の色を簡単に設定できます。