Question

我想在用户将鼠标悬停在链接上时显示弹出框（鼠标悬停事件），当用户通过鼠标离开链接时，此弹出窗口应该消失（mouseout事件），但问题出现在弹出窗口出现时，用户应该通过鼠标弹出框，但实际上由于链接选项卡的mouseout事件，框已消失，因此该框无法访问（确切的示例在linkedin.com中显示帐户设置，通知，添加连接等）菜单栏。任何帮助，我真的很感激。

Answer 1

正如frenchie和Patsy Issa告诉你的那样，你应该展示一些代码，或者你是在尝试的！但为了节省我们所有的时间，你可能还想看看mouseenter＆amp; mouseleave ...

Answer 2

检查this code

代码：

<html>
<head>
    <style type="text/css">
        #navigationbar ul{
        margin:0;
        padding:0;
        }
        #navigationbar ul li {
            display: inline-block;
            height: 20px;
            padding:10px;
        }
        #navigationbar ul li a {
            padding: 10px;
        }
        #navigationbar ul span {
            background:red;
        }

    </style>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script>
    var intervals;
    $('.test').mouseover(function(){
        $('.hov').hide();
        var a = $(this).attr('title');
        var b = $(this).parent();
        b.append('<span class="hov" style="top:-5px;">'+a+'</span>');
        intervals= setTimeout( "$('.hov').hide();",2000 );
    });

    console.log('outside'+intervals);
    $('#navigationbar').on('mouseover','.hov',function(){
        clearTimeout(intervals);
    });
    $('#navigationbar').on('mouseout','.hov',function(){
        $('.hov').hide();
    });

    </script>


</head>
<body>
<div id="navigationbar">
 <ul>
   <li><a class="test" href="#" title="test" >Home</a></li>
   <li><a class="test" href="#" title="test1">About</a></li >
   <li><a class="test" href="#" title="test2">Contact</a></li>
 <ul> 
</body>

</html>

Jquery中的鼠标悬停和鼠标移出事件

2 个答案: