-1

ユーザーがリンクにカーソルを合わせたときにポップアップ ボックスを表示したい (マウスオーバー イベント)。このポップアップ ウィンドウは、ユーザーがマウスでリンクを離れると消えます (マウスアウト イベント)。ポップアップボックスをマウスでクリックしますが、実際にはリンクタブのマウスアウトイベントのためにボックスが消えたため、ボックスにアクセスできません（メニューバーにアカウント設定、通知、接続の追加などを表示するための正確なサンプルはlinkedin.comにあります.何か助けてください、本当に感謝します。

4

2 に答える 2

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 に答える
0

frenchie と Patsy Issa があなたに言ったように、コードを表示するか、実際に試してみてください! しかし、時間を節約するために、mouseenterとmouseleave ...も参照してください。

于 2013-09-03T07:54:49.127 に答える