Отмена действия наведения при наведении мыши

Question

Пытается сохранить элемент навигации, освещенный, когда мышь находится в области выпадающего списка. Но когда мышь уходит, родитель по-прежнему получает значение фонового рисунка.

Basic HTML будет

<div class="mainnav"> 
    <ul> 
    <li> 
     <ul> 
     </ul> 
    </li> 
    </ul> 
</div> 

и мой JQuery код для этого

$(".main-nav ul li ul").each(function(){ 
    var bgcolor = "{{settings.main_navi_clr3}}"; 
    $(this).hover(function(){ 

     $(this).parent().css('background-color',bgcolor); 
     $(this).parent().find('a').css('color','#fff'); 
     $(this).find('a').css('color',bgcolor); 
    }); 
}); 

Answer 1

Рассмотрим использование addClass и removeClass.

JQuery

$(".main-nav ul li ul").each(function() { 
    $(this).mouseover(function() { 
     $(this).parent().addClass('hover'); 
    }); 
    $(this).mouseout(function() { 
     $(this).parent().removeClass('hover'); 
    }); 
); 

CSS

.main-nav ul li.hover { 
    background-color: #000; /* bgcolor */ 
} 

.main-nav ul li.hover a { 
    color: #fff; 
} 

.main-nav ul li.hover ul a { 
    color: #000; /* bgcolor */ 
}