Наведите, наведите курсор мыши и мышь - PullRequest
Новая
       32

Наведите, наведите курсор мыши и мышь

12 голосов
/ 16 декабря 2010

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

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

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

Ответы [ 3 ]

10 голосов
/ 16 декабря 2010

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

  1. CSS's :hover псевдокласс (но только если вам не нужно поддерживать IE6)
  2. mouseenter и mouseleave события

CSS's :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, заключается в том, что они bubble , и поэтому ваш обработчик mouseout в родительском элементе видел пузырек mouseout из базового элемента, когда Ваша мышь переместилась в элемент удаления. mouseenter и mouseleave не пузыриться, и поэтому у них нет этой проблемы.

3 голосов
/ 16 декабря 2010

вы пытались использовать mouseenter и mouseleave события вместо этого?

0 голосов
/ 18 мая 2016

Вы можете применить стиль к событиям 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="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>

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

...