Я ссорюсь отделений с классом "itemcontainer", которые показывают группу значков действия на наведении мыши. Один из значков действия имеет выпадающее меню с абсолютным положением, которое показывает на наведении мыши. Проблема, которую я пробую, решает, факт промежутки выпадающего меню по контейнеру объекта и когда Вы спускаете мышь к выпадающему меню, itemcontainer mouseout логика вталкивает и скрывает контейнер объекта и выпадающее меню. Любые предложения, код jQuery ниже.
$(".itemcontainer").live("mouseover", function () {
$(this).addClass("selecteditemcontainer");
$(this).find(".actioncontainer").show();
}).live("mouseout", function () {
$(this).removeClass("selecteditemcontainer");
$(this).find(".actioncontainer").hide();
});
$(".dropdown").live("mouseover", function () {
$(this).find(".submenu").slideDown("fast").show();
$(this).parent().mouseout(function () {
}, function () {
$(this).parent().find(".submenu").slideUp('fast'); //When the mouse hovers out of the subnav, move it back up
});
});
Вместо событий mouseover
и mouseout
если элементы являются дочерними, вам нужны события mouseenter
и mouseleave
которые не срабатывают при переходе от родителя к ребенку.
Событие
mouseleave
отличается отmouseout
тем, как оно обрабатывает всплеск событий. Если бы в данном примере использовалосьmouseout
, то при перемещении указателя мыши за пределы элемента Inner сработал бы обработчик. Обычно такое поведение нежелательно. Событиеmouseleave
, с другой стороны, запускает свой обработчик только тогда, когда мышь покидает элемент, к которому она привязана, а не потомка. Поэтому в данном примере обработчик срабатывает, когда мышь покидает элемент Outer, но не элемент Inner.