Наведите указатель мыши и мышь

Я изучаю и использую jQuery и хочу отображать значок удаления для некоторых элементов.

У меня есть внешний главный div, который содержит количество оберток для элементов. Внутри оболочки элемента я хочу отображать значок удаления, когда пользователь наводится на оболочку элемента и удаляет его, когда пользователь выходит из обертки элемента.

Используя mouseover и mouseout, я могу отображать и удалять значок, но как только я наводил указатель мыши на значок удаления, он удаляется, потому что он вызывает событие mouseout для обертки элемента. Что я делаю неправильно?

3 ответа

Два варианта для вас:

  • 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>[X]</span></div>
<div>And me <span>[X]</span></div>
<div>And me <span>[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 не пузырятся, и поэтому у них нет этой проблемы.


попробовали ли вы использовать mouseenter и mouseleave события?


Вы можете применить стиль к событию jQuery onmouseover и onmouseout. Когда пользователь наводится над меню, это событие активирует там, где вы можете установить эффекты.

<ul>
 <li onmouseover="this.style.backgroundColor='#F44336';" onmouseout="this.style.backgroundColor='transparent';" style="background-color: transparent;">
 <a href="http://www.infinetsoft.com/">learn dot net skills</a>
 </li>
 <li onmouseover="this.style.backgroundColor='#F44336';" onmouseout="this.style.backgroundColor='transparent';" style="background-color: transparent;">
 <a href="http://www.infinetsoft.com/htmltry">Work out html</a>
 </li>
 <li onmouseover="this.style.backgroundColor='#F44336';" onmouseout="this.style.backgroundColor='transparent';" style="background-color: transparent;">
 <a href="http://www.infinetsoft.com/Category/JQuery/9/1">jQuery tutorials</a>
 </li>
 </ul>

для более подробной информации

licensed under cc by-sa 3.0 with attribution.