-1

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

4

2 回答 2

0

正如 frenchie 和 Patsy Issa 告诉你的那样，你应该展示一些代码或者你确实尝试过的代码！但是为了节省我们大家的时间，您可能还想看看mouseenter和mouseleave ...

于 2013-09-03T07:54:49.127 回答
0

检查此代码

代码 ：

<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>
于 2013-09-03T08:55:53.533 回答