0

メニューバーで作業していて、ID をアクティブに設定した後、その上にカーソルを合わせると、設定した新しい色がなくなり、メニュー項目が元の色に戻ります。何か案は？ここに私の JSFiddle があります: http://jsfiddle.net/Z5M2a/2/ 

$(document).ready(function(){
    $('#active').mouseover(function() {
         $(this).css('background-color',  '#CCC');
    });
    $('#active').mouseout(function() {
         $(this).css('background-color',  '#CCC');
    });
    $('.menuOption').mouseover(function() {     
         $(this).css('background-color', '#999999');
    });
    $('.menuOption').mouseout(function() {
         $(this).css('background-color', '#e9e9e9');
     });
 });

HTML:

<div id="side-bar"> 
                <ul class="side-nav">
                  <li class="divider"></li>
                  <li class="menuOption" id="active"><a href="#">Link 1</a></li>
                  <li class="divider"></li>
                  <li class="menuOption"><a href="#">Link 2</a></li>
                  <li class="divider"></li>
                  <li class="menuOption"><a href="#">Link 3</a></li>
                  <li class="divider"></li>
                  <li class="menuOption"><a href="#">Link 4</a></li>
                  <li class="divider"></li>
                </ul>   
           </div>
4

2 に答える 2

1

問題は、それ#activeも であり、すべての要素の をイベントの特定の背景色に.menuOption明示的に設定していることです。これにより、以前に設定された要素のが上書きされます。background-color.menuOptionmouseout#activebackground-color

コードを次のように並べ替えます。

$(document).ready(function () {
    $('.menuOption').mouseover(function () {
        $(this).css('background-color', '#999999');
    });
    $('.menuOption').mouseout(function () {
        $(this).css('background-color', '#e9e9e9');
    });
    $('#active').mouseover(function () {
        $(this).css('background-color', '#CCC');
    });
    $('#active').mouseout(function () {
        $(this).css('background-color', '#CCC');
    });
});

JS フィドルのデモ。

そして、問題は消えます。

ちなみに、CSS を使用するには (はるかに単純です)、次のルールを追加するだけです。

#active:hover {
    background-color: #ccc;
}

.menuOption:hover {
    background-color: #999;
}

JS フィドルのデモ。

于 2013-08-05T19:25:14.110 に答える
0

アイテムの色を保存し、マウスアウトが発生したときに元の色を返します。

$(document).ready(function(){
    var itemColor;
    $('#active').mouseover(function() {

        $(this).css('background-color',  '#CCC');
    });
    $('#active').mouseout(function() {

        $(this).css('background-color',  itemColor);
    });
    $('.menuOption').mouseover(function() {     
          itemColor = $(this).css('background-color');
        $(this).css('background-color', '#999999');
    });
    $('.menuOption').mouseout(function() {

        $(this).css('background-color', itemColor);
    });
});
于 2013-08-05T19:28:32.047 に答える