Question

当我将鼠标移到上面时，我想要一张图片，必须显示ul，当我离开ul时，它必须靠近ul。

HTML：

<img id="ro" src="setting.png" onmouseover="rotate()" style="width:20px;height:20px;border:none;"/>
<br />
<ul id="settings" style="position:fixed;" onmouseout="hj()">
  <li><a href="#">111</a></li>
  <li><a href="#">222</a></li>
  <li><a href="#">333</a></li>
  <li><a href="#">444</a></li>
</ul>

当我在图片上移动鼠标时，图片会旋转360度，然后显示ul。

JS：

function show(n) {
var tds = $("#settings li") ;
setTimeout(function(){ tds.eq(n).fadeIn(500); }, n*100);
}

当我从ul运出鼠标时，运行此代码：

function hj() {
var tds = $("#settings li");
for (var i = tds.length - 1; i > -1; i--) {
    hide(i) ;
}
}

如果我再次将鼠标悬停在图片上，图片会再次旋转并使用以下代码关闭ul：

function hide(n) {
var tds = $("#settings li");
setTimeout(function() { tds.eq(tds.length - n - 1).fadeOut(500); }, n*100);
}

但是当ul打开时，当我继续第3或第4个元素（第3或第4个li）时，ul已关闭。哪里错了？

Answer 1

mouseout事件气泡。您应该使用jQuery以编程方式注册事件（也请查看http://api.jquery.com/mouseleave/）和/或取消冒充hj处理程序内的事件。

用javascript和jquery和ul制作下拉菜单

1 个答案: