Jquery Hover State

Question

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

有些人能说明我错了吗？我需要下拉菜单才能在上面悬停显示。

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

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

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

任何帮助都会很棒!!!!

Answer 1

试试这个：

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

并将.dropdown-profile css从top:60px更改为top:50px

工作Fiddle

Answer 2

你需要尝试

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

演示：Fiddle

Answer 3

不幸的是你的JSFiddle代码有问题。但是，看起来为了这些目的使用mouseenter和mouseleave事件会更好，我经常遇到悬停事件的问题。

Answer 4

请查看http://jsfiddle.net/tj7cq/6/

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

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

你想要实现这个还是别的什么？

Answer 5

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

虽然你在那里得到了正确的答案，我会告诉它只是一个修复，

因为您只是将鼠标悬停在一个外部元素上，并且您的下拉菜单位于不同的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"＆gt;之外怎么办？当您从<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();
    })

工作DEMO