Question

我正试图通过一种下拉列表为我的用户制作注销系统。当用户在他的名字上悬停时，下拉列表会打开，当他离开div时，它会被jQuery隐藏。我试图用mouseenter和mouseleave函数做到这一点，但似乎没有工作。请参阅http://jsfiddle.net/b6K2R/

上的我的jsfiddle文件

以下是我的代码： -

HTML

<div id="ppic" style="float:right;position:relative;" class="top" href="#"> 
<img style="float:left;" src="https://graph.facebook.com/100005546162517/picture"
width="25" height="25"> 
<span style="float:left;margin:4px 0 0 5px;">
Deval
</span>
<div class="submenu">
<ul class="root">
<li ><a href="settings" >Settings</a></li>
<li ><a href="Logout" >Logout</a></li>
</ul>
</div>
</div>

jQuery： -

$(document).ready(function(){
$(".submenu").hide();
});
$("#ppic").mouseenter(function(){
$(".submenu").show();
});
$("#ppic").mouseleave(function(){
$(".submenu").hide();
});

CSS： -

.submenu
{
background: #fff;
position: absolute;
top: 41px;
right: 0px;
z-index: 1;
width: 125px;
margin-left: 10px;
padding: 0px 0 5px;
border-bottom-right-radius:6px;
border-bottom-left-radius:6px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}
.top li a 
{
color: #555555;
display: block;
font-family: arial;
font-weight: bold;
padding: 10px 15px 10px 20px;
cursor: pointer;
text-decoration:none;
outline:none;
}

.top li a:hover
{
background:#155FB0;
color: #FFFFFF;
text-decoration: none;
}
.root
{
list-style:none;
margin:0px;
padding:0px;
font-size: 11px;
}

请帮帮我......！提前致谢...：＆gt;

Answer 1

您必须将“Frameworks＆amp; Extensions”设置为“jQuery x（version）”。这是工作。

Answer 2

将鼠标悬停在#ppic元素上时会显示.submenu元素。当您将鼠标移开/移出#ppic元素时，它将隐藏.submenu元素。

它正是你编码的方式。问题是#ppic元素和子菜单之间存在差距。因此，当您尝试将鼠标移动到.submenu元素时，它会在mouseout元素上注册为#ppic。

尝试调整CSS中top的{{1}}属性，将.submenu移近.submenu元素。

我将#ppic值修改为top并且工作正常。

这是一个小提琴：http://jsfiddle.net/b6K2R/5/

jQuery mouseenter和mouseleave

2 个答案: