Jquery悬停状态

我已经创建了一个查询悬停状态。当您将鼠标悬停在小图片上时，它将显示下拉菜单。虽然它不停留在悬停状态

能告诉我哪里出了问题吗？我需要下拉菜单保持显示时，悬停在它

---

任何帮助都会很好

不幸的是，您的JSFIDLE代码出了问题。但是，看起来使用mouseenter和mouseleave事件更好，我经常遇到悬停事件的问题。

请查看

您是想实现这一目标还是其他目标？

试试以下方法：

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

并将您的

.dropdown profile

css从

top:60px

更改为

top:50px

工作

你需要试试

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)
})

---

演示：

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

虽然你得到了正确的答案，但我认为这只是一个修正

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

在css中，保持子元素相对于父元素的位置

position:relative

这是你的css

css 你的代码呢

代码

---

工作您的小提琴中没有包含jquery，当包含它时，您的意思是您希望在离开图像时保持下拉列表可见吗？您的小提琴工作正常，您希望它一直保持到单击某个对象为止？如果只提供一个悬停函数，它会在mouseenter上调用一次，在mouseleave上调用一次。提供第二个悬停的空函数，您将更接近您的解决方案。请澄清您下拉列表的预期行为。悬停包括mouseenter和mouseout，他的小提琴缺少jqueryAha！现在我明白你的意思了。我建议您使用timeout隐藏菜单，这样用户就可以将鼠标悬停在您的菜单上。一旦他将鼠标移到你的菜单上，你就可以杀死超时，或者设置一些标志，这些标志将在超时处理程序中被检查，并且不会隐藏菜单。我的想法和vinothini差不多。你能在滚下时隐藏下拉列表吗？你能在滚下时隐藏下拉列表吗？

    /*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='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>

position:relative

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();
    })