-1

我有一张我想要的图像,当我将鼠标悬停在它上面时,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关闭。哪里错了?

4

1 回答 1

0

事件mouseout冒泡。您应该使用 jQuery 以编程方式注册事件(也可以查看http://api.jquery.com/mouseleave/)和/或取消hj处理程序中事件的冒泡。

于 2013-07-06T08:33:20.157 回答