悬停，鼠标悬停和鼠标移出

Question

我正在学习和使用jQuery，并希望为某些元素显示删除图标。

我有一个外部主div，它包含多个元素包装器。在元素包装器中，我想在用户将鼠标悬停在元素包装器上时显示删除图标，并在用户移出元素包装器时将其删除。

使用mouseover和mouseout，我可以显示和删除图标，但只要我将鼠标移到删除图标上，它就会被移除，因为它会触发mouseout事件元素包装器。我做错了什么？

Answer 1

两个选项：

1. CSS的:hover伪类（但仅当您不必支持IE6时）
2. 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 */
}

Live example

但是，除了:hover元素之外，IE6不支持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
    }
 );

这是一个完整的live example：

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>

使用jQuery的JavaScript：

$('div').hover(
  function() {
    $(this).find('span.del').show();
  },
  function() {
    $(this).find('span.del').hide();
  }
);

您遇到mouseover和mouseout时遇到问题的原因是他们冒泡，因此您的父元素上的mouseout处理程序看到了冒泡{当鼠标移动到delete元素时，从底层元素{1}}。 mouseout和mouseenter不会冒泡，因此他们没有这个问题。

Answer 2

您是否尝试过使用mouseenter和mouseleave事件？

Answer 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="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>

for more details