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