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

Question

我正在学习和使用jQuery并想要为某些元素显示一个删除图标。

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

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

- KutePHP

---

在一个“哎呀！”的瞬间，我添加了缺失的CSS答案到我的回答中。你并没有说你必须使用JavaScript来完成这个任务，是吧？:-) 但是也有JavaScript选项（如果你想要支持IE6的话）。 - T.J. Crowder

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不支持除a元素外的:hover伪类。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。mouseenter 和 mouseleave 不会冒泡，因此它们没有这个问题。

- T.J. Crowder

---

嘿，谢谢。实际上我之前用过jQuery来实现这个功能，但是在我的情况下，我想要在鼠标悬停时添加图标。使用上述方法时，当我将鼠标移动到图标上时，会向元素包装器中添加多个图标。如何阻止这种情况的发生？ - KutePHP

@KutaPHP：根据您的描述，似乎您尝试使用mouseover和mouseout而不是mouseenter和mouseleave。再次说明，它们是不同的事件，行为也不同（请参见上面答案末尾的注释）。但是，如果您真的在使用mouseenter和mouseleave，那么似乎您没有在mouseleave上删除元素。如果您这样做，它就可以正常工作：http://jsbin.com/umalu4/2 但是添加到DOM并从DOM中删除比显示/隐藏更重量级，因此建议使用显示/隐藏。 - T.J. Crowder

嘿，再次感谢...我解决了这个问题...我直接添加了图像，现在我将其作为 span 的背景添加，问题解决了。 :) - KutePHP

Answer 2

你尝试使用mouseenter和mouseleave事件了吗？

- mkoryak

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>

了解更多细节

- Mohamed Rasik