jQuery 悬停、鼠标悬停和鼠标移开

Hover, mouseover and mouse out

提问by KutePHP

I'm learning and using jQuery and want to display a delete icon for some elements.

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

I have an outer main div, which contains number of wrappers for elements. Inside the element wrapper, I want to display a delete icon when the user hovers over the element wrapper, and remove it when user moves out of the element wrapper.

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

Using mouseoverand mouseout, I can display and remove the icon, but as soon as I move my mouse over the delete icon it is removed because it fires the mouseoutevent for the element wrapper. What am I doing wrong?

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

回答by T.J. Crowder

Two options for you:

两种选择：

1. CSS's :hoverpseudo-class (but only if you don't have to support IE6)
2. mouseenterand mouseleaveevents

1. CSS 的:hover伪类（但前提是您不必支持 IE6）
2. mouseenter和mouseleave事件

CSS's :hoverpseudo-class

CSS 的:hover伪类

You can make the browser do all the work if you don't need IE6 support, by using the :hoverpseudo-class:

如果您不需要 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

活生生的例子

However, IE6 doesn't support the :hoverpseudo-class except on aelements. IE7+ and all recent other browsers do.

但是，IE6 不支持元素:hover以外的伪类a。IE7+ 和所有最近的其他浏览器都可以。

mouseenterand mouseleaveevents

mouseenter和mouseleave事件

If CSS doesn't do it for you, you're looking for the mouseenterand mouseleaveevents, which are IE-specific but emulated by jQuery on all other browsers. jQuery even has a convenient function, hover, for hooking up handlers to both events so you can readily accomplish what you're looking to do.

如果 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
    }
 );

Here's a complete live example:

这是一个完整的实时示例：

HTML:

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 using jQuery:

使用 jQuery 的 JavaScript：

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

The reason you had trouble with mouseoverand mouseoutis that they bubble, and so your mouseouthandler on your parent element was seeing the bubbled mouseoutfrom the underlying element when your mouse moved into the delete element. mouseenterand mouseleavedon't bubble, and so they don't have that problem.

您遇到问题的原因mouseoverandmouseout是它们bubble，因此当您的鼠标移入 delete 元素时mouseout，您的父元素上的处理程序会看到mouseout从底层元素中冒出的气泡。mouseenter并且mouseleave不要冒泡，所以他们没有那个问题。

回答by mkoryak

have you tried using mouseenterand mouseleaveevents instead?

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

回答by Mohamed Rasik

You can apply style on the jQuery event onmouseover and onmouseout. When the user hovers over the menu this event will trigger there you can set effects.

您可以在 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

更多细节