悬停、鼠标悬停和鼠标移出

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 */
}

实例

但是，IE6 不支持 :hover 伪类-class，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>

使用 jQuery 的 JavaScript：

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

mouseover 遇到问题的原因 和 mouseout 是它们冒泡，因此父元素上的 mouseout 处理程序会看到冒泡的 mouseout当鼠标移动到删除元素时，从底层元素中删除。 mouseenter 和 mouseleave 不会冒泡，因此它们不存在这个问题。

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>

对于更多详情