Цвет фона кнопки исчезает после зависания над

Question

Я работал над панелью меню, и после того, как я установил идентификатор активным, я наводил на него курсор, и новый цвет, который я установил, ушел, и пункт меню возвращается обратно его первоначальный цвет. Есть идеи? Вот мой 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> 

Answer 1

Проблема заключается в том, что #active также .menuOption, и вы явно устанавливая background-color всех .menuOption элементов определенного фона цвета на событии mouseout, которое переписывает ранее установленный элемент #active элемента background-color.

Re порядка ваш код следующим образом:

$(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 Fiddle demo.

И проблема исчезает.

Кстати, использовать CSS (который является гораздо более простой), просто добавьте следующие правила:

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

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

JS Fiddle demo.

Answer 2

Сохраните цвет деталя, и когда мышь выйдет, верните исходный цвет.

$(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); 
    }); 
});