當用戶將鼠標懸停在無序列表菜單上時,我嘗試使用jQuery創建淡入淡出/淡出效果。因此,我可以在用戶使用子菜單時淡入淡出將鼠標懸停在包含子項目的菜單項上,但我正在努力隱藏它。淡入淡出鼠標懸停菜單元素
要求如下 - 如果鼠標不在子菜單項或它的父級上 - 淡出子菜單列表。
我包括我的菜單的屏幕截圖和HTML標記,請建議如何隱藏菜單按要求上述所列:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Home</title>
<link href="Styles/Style.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
$('#subList').css("display", "none");
$('#item3').mouseover(function() {
$('#subList').fadeIn('slow');
$('#subList').css("display", "block");
});
$('#subItem1').mouseover(function() {
$('#subList').css("display", "block");
});
$('#subItem2').mouseover(function() {
$('#subList').css("display", "block");
});
$("#subItem1").mouseleave(function() {
$("#subList").fadeOut("slow");
});
$('#subItem2').mouseleave(function() {
$('#subList').fadeOut("slow");
});
});
</script>
</head>
<body>
<div class="menu">
<ul>
<li><a href="item4.htm">Menu Item 4</a></li>
<li><a href="#" id="item3">Menu Item3</a>
<ul id="subList">
<li id="subItem1"><a href="subItem1.htm">Sub Item 1</a></li>
<li id="subItem2"><a href="subItem2.htm">Sub Item 2</a></li>
</ul>
</li>
<li><a href="item2.htm">Menu Item 2</a></li>
<li><a href="item1.htm">Menu Item 1</a></li>
</ul>
</div>
</body>
</html>
可以詳細說明你的代碼有什麼問題我已將你的代碼複製到jsfiddle鏈接及其工作http://jsfiddle.net/2yEtK/ – 2012-04-25 05:41:01