listItems.on('mouseover', '.list-item', hoverOnMouseover);
 

Уважаемые форумчане,

подскажите пожалуйста как сделать так, чтобы при наведении курсора на DIV, event распространялся на див, а не на элементы внутри его по отдельности.

<ul>
    <li> 
        <div>
            <p><p>
            <button></button>
        </div> 
    </li>
    <li> 
        <div>
            <p><p>
            <button></button>
        </div> 
    </li>
</ul>

listItems.on('mouseover', '.list-item', hoverOnMouseover);
function hoverOnMouseover(ev) {
     var target = $(ev.currentTarget);
     target.css('background', '#CEE6E9');
}

этот код как бы работает, див выкрашивается в нужный цвет, но при передвижении курсора по диву постоянно вызывается указанный в параметрах `on`, элемент list-item. Это не заметно и работает ок, но межает дальнейшей работе.

если непонятно выразился, подскажите скажите как правильно сделать hover на list-item :)

спасибо!

tralala, повешай на дочерние элементы обработчик того же события и отключи всплытие для это события.

$('li').mouseover(function(e){
	$(this).css('background', '#CEE6E9');
}).find('*').mouseover(function(e){
	e.stopPropagation();
});

mouseenter

Огромнющее спасибо :)