Ответ 1
Два варианта для вас:
- CSS
:hoverпсевдокласс (но только если вам не нужно поддерживать IE6) -
mouseenterиmouseleaveсобытия
CSS :hover псевдокласс
Вы можете заставить браузер выполнять всю работу, если вам не нужна поддержка IE6, используя :hover псевдокласс:
/* Don't show `child` elements inside `parent` elements...*/
parent child {
display: none;
}
/* ...unless the `parent` element is being hovered over */
parent:hover child {
display: block; /* or inline-block or whatever */
}
Однако IE6 не поддерживает псевдо-класс :hover, кроме элементов a. IE7 + и все последние браузеры.
mouseenter и mouseleave события
Если CSS не делает этого для вас, вы ищете события mouseenter и mouseleave, которые специфичны для IE, но эмулируются jQuery во всех других браузерах. jQuery даже имеет удобную функцию, hover, для подключения обработчиков к обоим событиям, чтобы вы могли легко выполнить то, что вы хотите сделать.
$(...your parent element...).hover(
function() {
// Called when the mouse enters the element
},
function() {
// Called when the mouse leaves the element
}
);
Здесь приведен полный живой пример:
HTML:
<div>Hover over me <span class='del'>[X]</span></div>
<div>And me <span class='del'>[X]</span></div>
<div>And me <span class='del'>[X]</span></div>
JavaScript с помощью jQuery:
$('div').hover(
function() {
$(this).find('span.del').show();
},
function() {
$(this).find('span.del').hide();
}
);
Причина, по которой у вас возникли проблемы с mouseover и mouseout, заключается в том, что они пузырятся, и поэтому ваш обработчик mouseout на вашем родительском элементе увидел пузырящийся mouseout из базового элемента, когда ваша мышь переместилась в delete элемент. mouseenter и mouseleave не пузырятся, и поэтому у них нет этой проблемы.