悬停,鼠标悬停和鼠标移出

时间:2010-12-16 17:03:08

标签: jquery hover mouseover

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

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

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

3 个答案:

答案 0 :(得分:10)

两个选项

  1. CSS的:hover伪类(但仅当您不必支持IE6时)
  2. mouseentermouseleave次事件
  3. 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 +和所有最近的其他浏览器都可以。

    mouseentermouseleave个事件

    如果CSS没有为你做,你正在寻找mouseentermouseleave事件,这些事件是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();
      }
    );
    

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

答案 1 :(得分:3)

您是否尝试过使用mouseentermouseleave事件?

答案 2 :(得分:0)

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