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

尝试这个：

$(".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 回答
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 回答
0

这只是为了您的理解，可能在您将来的编码中您可以这样应用。

虽然你在那里得到了正确的答案，但我会说这只是一个修复，

因为您只是将鼠标悬停在一个外部元素上，而您的下拉菜单位于不同的 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

不幸的是，您的 JSFiddle 代码有问题。但是，看起来最好将 mouseenter 和 mouseleave 事件用于此类目的，我经常遇到悬停事件的问题。

于 2013-09-11T10:48:02.077 回答
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 回答