如何检测jQuery中两个元素的mouseout? [英] How to detect mouseout of two elements in jQuery?

问题描述

尝试在此处创建一个简单的jquery，这是到目前为止的代码:

Trying to make a simple jquery drop down here, here's my code so far:

HTML:

    <ul id="nav">
        <li>
            <a href="">Cats</a>
            <ul>
                <li><a href="">Tigers</a></li>
                <li><a href="">Lions</a></li>
                <li><a href="">Leopards</a></li>
            </ul>
        </li>
        <li>
            <a href="">Dogs</a>
            <ul>
                <li><a href="">Wolves</a></li>
                <li><a href="">Dingos</a></li>
                <li><a href="">Dholes</a></li>
            </ul>
        </li>            
    </ul>

CSS:

ul#nav { border: 1px solid #ccc; overflow: hidden; background: #eee; padding: 0; }
ul#nav li { display: block; float: left; border-right: 1px solid #ccc; padding: 10px 20px; }

ul#nav li ul { display: none; border: 1px solid #ccc; overflow: hidden; position: absolute; background: #eee; width: 100px; padding: 0; margin: 10px 0 0 -20px; border-bottom: none; }
ul#nav li ul li { display: block; float: left; width: 100%; border-bottom: 1px solid #ccc; }

jQuery:

$(document).ready(function() {

    $('ul#nav > li > a').mouseover(function() {
            $(this).parent().find('ul').slideDown('fast');
    });

    $('ul#nav > li > a').mouseout(function() {
            $(this).parent().find('ul').slideUp('fast');
    });

});

现在的问题是，当用户不再将鼠标悬停在导航链接上时，下拉列表ul消失了.如果用户未将鼠标悬停在导航链接 OR 或将鼠标悬停在下拉列表ul上，则我需要它消失.该怎么做?

Problem is now when the user no longer hovers over the nav link the drop down ul goes away. I need it to go away if the user is not hovering over the nav link OR hovering over the drop down ul. How to do this?

推荐答案

http://jsfiddle.net/Bdpnd/

$(document).ready(function() {

    $('ul#nav > li').hover(function() {
        $(this).children('ul').slideDown('fast');
    },function() {
        $(this).children('ul').stop(true, true).slideUp('fast');
    });

});

我做了一个悬停只是为了将其缩短一点，但是，最主要的是让它放到li而不是a上，因为li会扩展以容纳内容，所以您实际上不会离开li悬停在新元素上.

I made it a hover just to shorten it up a bit, the main thing however, is having it drop down on the li rather than the a, because the li will expand to hold the contents, so you wont actually leave the li when hovering over the new elements.

这篇关于如何检测jQuery中两个元素的mouseout?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！