我正在使用的小提琴:http://jsfiddle.net/Hu4bg/1/
我正在尝试创建一个垂直菜单,当您将鼠标悬停在链接上时,我希望图像(具有内容的div会更好)向下滑动,并且永远不会再次向上滑动,相反,当另一个链接处于鼠标悬停时,它将在最后一张不断滑动的图像上向下滑动。
我想我应该更改z-index值,但我不知道如何通过JQuery控制此事物。你能给我一个小提琴小窍门吗?
$(document).ready(function() {
$("#leftmenu a").hover(function() {
$("#img1").slideDown(250);
});
$("#leftmenu a").mouseleave(function() {
$("#img1").slideUp(250);
});
});
最佳答案
你的意思是这样吗? http://jsfiddle.net/Hu4bg/3/
我将代码压缩为一个事件,并更改了其工作方式(将多个图像框的ID匹配到链接类):
$("#leftmenu a").hover(function() {
$("[id^=img]:not([id=" + $(this).attr("class") + "])").slideUp(250);
$("#" + $(this).attr("class")).slideDown(250);
});
我还添加了另外两个
img
标记,其ID与a
标记中的类匹配:<div id="img1">Image here</div>
<div id="img2">Image here</div>
<div id="img3">Image here</div>
<ul>
<li> <a class="img1" href="#">Image 1</a></li>
<li> <a class="img2" href="#">Image 2</a></li>
<li> <a class="img3" href="#">Image 3</a></li>
</ul>