0
我正在設計一個用於學習目的的網站，由於某種原因，我的導航欄在所有選項卡的「懸停」狀態下都處於粘貼狀態。我所遵循的教程非常深入，但我已經完成了幾個小時的代碼，我想我只是沒有足夠的知識來解決問題。在解決問題時，我查看了源代碼並將其複製（從他們的示例中），但仍然存在相同的問題。按鈕在hove狀態下都是「始終」的，因此Java腳本似乎沒有做任何事情。動畫菜單使用jQuery幫助需要
教程：http://www.shopdev.co.uk/blog/animated-menus-using-jquery/
有我已爲此（比教程略有不同）在3個圖像
bkrd.png =窄圖像400像素高的是重複的背景工具欄（無菜單選項卡） spritedown.png =子畫面顯示正常按鈕狀態（家&圖集）81像素高
spriteover.png =精靈該節目按鈕懸停狀態。 81像素高大
我的代碼：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Animated Menu Demo</title>
<style>
body {
background-color:#333333;
margin:0;
}
/* Menu Body */
ul#menu {
width:80%;
height:400px;
background:url(bkrd.png) repeat-x;
list-style:none;
margin:0;
padding:0;
padding-top:109px; /* distance from top where i need the sprite to start*/
padding-left:20%;
}
/* Float LI Elements - horizontal display */
ul#menu li {
float:left;
}
/* Link - common attributes */
ul#menu li a {
background:url(spritedown.png) no-repeat scroll top left;
display:block;
height:81px;
position:relative;
}
/* Specify width and background position attributes specifically for the class: "home" */
ul#menu li a.home {
width:159px;
background-position:0px 0px;
}
/* Specify width and background position attributes specifically for the class: "portfolio" */
ul#menu li a.portfolio {
width:157px;
background-position:-159px 0px;
}
/* Span (on hover) - common attributes */
ul#menu li a span {
background:url(spriteover.png) no-repeat scroll bottom left;
display:block;
position:absolute;
top:0;
left:0;
height:81px;
width:100%;
z-index:100;
}
/* Span (on hover) - display pointer */
ul#menu li a span:hover {
cursor:pointer;
}
/* Shift background position on hover for the class: "home" */
ul#menu li a.home span {
width:159px;
background-position:0px 0px;
}
/* Shift background position on hover for the class: "portfolio" */
ul#menu li a.portfolio span {
background-position:-159px 0px;
}
</style>
腳本：
<!-- Include jQuery Library -->
<script src="jquery-1.2.2.pack.js" type="text/javascript"></script>
<!-- Let's do the animation -->
<script type="text/javascript">
$(function() {
// set opacity to nill on page load
$("ul#menu span").css("opacity","0");
// on mouse over
$("ul#menu span").hover(function() {
// animate opacity to full
$(this).stop().animate({
opacity: 1
}, 'slow');
},
// on mouse out
function() {
// animate opacity to nill
$(this).stop().animate({
opacity: 0
}, 'slow');
});
});
</script>
</head>
體：
<body>
<ul id="menu">
<li><a href="#" class="home"><span></span></a></li>
<li><a href="#" class="portfolio"><span></span></a></li>
</ul>
</body>
</html>
你可以添加一個jsfiddle嗎？ – Wolf
我剛剛複製了你的代碼，只用背景顏色替換了背景圖片，它似乎工作。 在此處查看：http://jsfiddle.net/FBQ4M/1/ – Frankey
謝謝大家的關注...我有jsfiddle顯示我的問題... http://jsfiddle.net/7JxMF/ – TheJavaBeast