Подтвердить что ты не робот

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

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

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

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

4b9b3361

ОТВЕТЫ

Ответ 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 не пузырятся, и поэтому у них нет этой проблемы.

Ответ 2

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

Ответ 3

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

<style type="text/css">
        .menu {
            background-color: #CDDC39;
            list-style: none;
            margin: 100px;
            padding: 0;
            width: 10em;
        }
            .menu li {
               margin: 0;
               padding: 5px;
           }
            .menu a {
            color: #333;
           }
    </style>
    <ul class="menu">
        <li onmouseover="this.style.backgroundColor='#F44336';" onmouseout="this.style.backgroundColor='transparent';" style="background-color: transparent;">
            <a href="#" onclick="location.href='http://www.infinetsoft.com/'; return false;">learn dot net skills</a>
        </li>
        <li onmouseover="this.style.backgroundColor='#F44336';" onmouseout="this.style.backgroundColor='transparent';" style="background-color: transparent;">
            <a href="#" onclick="location.href='http://www.infinetsoft.com/htmltry'; return false;">Work out html</a>
        </li>
        <li onmouseover="this.style.backgroundColor='#F44336';" onmouseout="this.style.backgroundColor='transparent';" style="background-color: transparent;">
            <a href="#" onclick="location.href='http://www.infinetsoft.com/Category/JQuery/9/1'; return false;">jQuery tutorials</a>
        </li>
    </ul>

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