0

クエリのホバー状態を作成しました。小さな画像にカーソルを合わせると、ドロップダウン メニューが表示されます。ホバー状態にはなりませんが。

私が間違っているところを示すことができますか？ホバーしたときにドロップダウンメニューを表示したままにする必要があります。

http://jsfiddle.net/tj7cq/1/

$(".author-profile-top").hover(function (event) {
    event.stopPropagation();
    $(".dropdown-profile").toggle();
})

 $(".dropdown-profile").click(function (event) {
    event.stopPropagation();
})

どんな助けでも素晴らしいでしょう!!!!

4

5 に答える 5

1

あなたは試す必要があります

var $toggle = $(".dropdown-profile").hover(function(){
    clearTimeout($toggle.data('hideTimer'))
}, function(){
    $toggle.hide();
});
$(".author-profile-top").hover(function (event) {
    clearTimeout($toggle.data('hideTimer'))
    $toggle.show();
}, function(){
    timer = setTimeout(function(){
        $toggle.hide();
    }, 200)
    $toggle.data('hideTimer', timer)
})

デモ:フィドル

于 2013-09-11T11:06:36.560 に答える
1

これを試して：

$(".author-profile-top,.dropdown-profile").hover(function (event) {
    event.stopPropagation();
    $(".dropdown-profile").toggle();
})

.dropdown-profileCSS を からtop:60pxに変更します。top:50px

働くフィドル

于 2013-09-11T10:56:44.377 に答える
0

これは理解のためのものであり、将来のコーディングでこのように適用できる可能性があります。

あなたはそこで正しい答えを得ましたが、私はそれがただの修正であると言うでしょう、

1 つの外側の要素にカーソルを合わせるだけで、ドロップダウン メニューが別の div にあるため、コードは次のとおりです。

    /*hovering element*/
 <li> <a href="#"><img src="http://heyfitty.com/demo/img/general/profile-head.png" class="author-profile-top"/></a>  
    </li>

 /*displayed element on hover*/
<div class="dropdown-profile">
        <div class="popout-pointer"></div>
        <ul>
            <li><a href="#" class="view-profile user-popup-padding">View Profile</a>
            </li>
            <li><a href="#" class="the-charts">Edit Profile</a>
            </li>
            <li><a href="#" class="newsfeed">Settings</a>
            </li>
            <li><a href="#" class="your-messages" class="user-popup-padding-bottom">Logout</a>
            </li>
        </ul>
    </div>

では、あなたから<div class="dropdown-profile"離れたときに > が見えるようにする にはどうすればよいでしょうか。<a href="#"><img src="http://heyfitty.com/demo/img/general/profile-head.png" class="author-profile-top"/></a>div

標準的な方法は、以下のコードのようにすべての要素を div にまとめることです。 <div class='content'> これを試してください

html

<div class='content'>
<li> <a href="#"><img src="http://heyfitty.com/demo/img/general/profile-head.png" class="author-profile-top"/></a>

</li>
<div class="dropdown-profile">
    <div class="popout-pointer"></div>
    <ul>
        <li><a href="#" class="view-profile user-popup-padding">View Profile</a>
        </li>
        <li><a href="#" class="the-charts">Edit Profile</a>
        </li>
        <li><a href="#" class="newsfeed">Settings</a>
        </li>
        <li><a href="#" class="your-messages" class="user-popup-padding-bottom">Logout</a>
        </li>
    </ul>
</div>
</div>

CSSで、子要素の位置を親要素に対する相対位置に保ちます

position:relative

ここにあなたのcssがあります

CSS

li {

    list-style:none;

}

.author-profile-top {

    float:right;

    margin-top: 20px;

}

.dropdown-profile {

    position: relative;  

    background-color: white;

    border: 1px solid #cccccc;

    width: 160px;

    border: solid 1px #cccccc;

    cursor: pointer;

    top: 60px;

    z-index: 9999;

    left: 385px;

    color:#ccccc;

    height:100px;

    display:none;

}

そしてあなたのコード

コード

$(".content").hover(function (event) {
        event.stopPropagation();
        $(".dropdown-profile").toggle();
    })

     $(".dropdown-profile").click(function (event) {
        event.stopPropagation();
    })

ワーキングデモ

于 2013-09-11T11:49:56.537 に答える
0

http://jsfiddle.net/tj7cq/6/をご覧ください。

$(".author-profile-top").hover(function (event) {
    $(".dropdown-profile").show();
})

 $(".dropdown-profile").click(function (event) {
      $(".dropdown-profile").hide();
 })

これを達成しようとしていますか、それとも他の何かを達成しようとしていますか?

于 2013-09-11T10:53:40.807 に答える
0

残念ながら、JSFiddle コードに何か問題があります。しかし、そのような目的にはmouseenterおよびmouseleaveイベントを使用する方が良いように見えます.hoverイベントで問題が発生することがよくありました。

于 2013-09-11T10:48:02.077 に答える