我嘗試進行稍微不同的菜單設置。 我所有的標籤都必須有一個ID才能移動。但是當你在連接上運行你的鼠標時,它應該從底部有一個文本框的地方動畫。 我怎樣才能讓jquery找到指定的id然後添加一個類給動畫?查找ID並添加動畫類
這裏是我的代碼:
HTML:
<div id="right_nav">
<ul>
<li><a id="nav_1" href="#">#</a></li>
<li><a id="nav_2" href="#">#</a></li>
<li><a id="nav_3" href="#">#</a></li>
<li><a id="nav_4" href="#">#</a></li>
<li><a id="nav_5" href="#">#</a></li>
<li><a id="nav_6" href="#">#</a></li>
<li><a id="nav_7" href="#">#</a></li>
<li><a id="nav_8" href="#">#</a></li>
<li><a id="nav_9" href="#">#</a></li>
</ul>
</div>
CSS:
#right_nav { width:700px; height:auto; float:left;}
#right_nav ul { width:100%; height:100%; margin:0; padding:0;}
#right_nav ul li { list-style-type:none; float:left;}
#nav_1 { width: 250px; height:160px; background-color:#33CCCC; margin: 0px 0 0 5px; position:absolute;}
#nav_2 { width: 230px; height:400px; background-color:#66F; margin: -100px 0 0 260px; position:absolute;}
#nav_3 { width: 250px; height:100px; background-color:#693; margin: 329px 0 0 447px; position:absolute;}
#nav_4 { width: 200px; height:200px; background-color:#CC9; margin: 200px 0 0 29px; position:absolute;}
#nav_5 { width: 190px; height:300px; background-color:#F9C; margin: 0 0 0 510px; position:absolute;}
#nav_6 { width: 250px; height:200px; background-color:#CF0; margin: 450px 0 0 450px; position:absolute;}
#nav_7 { width: 150px; height:200px; background-color:#F99; position:absolute; margin: 320px 0 0 250px;}
#nav_8 { width: 220px; height:200px; background-color:#693; position:absolute; margin: 420px 0 0 0;}
#nav_9 { width: 150px; height:100px; background-color:#693; position:absolute; margin: 540px 0 0 250px;}
.hover { width:50px; height:25px; background-color:#993300; }
的jQuery:
$(document).ready(function() {
$("#right_nav ul li").hover(function(){
$('#right_nav ul li').addClass("hover");
},
function(){
$('#right_nav ul li').removeClass("hover");
});
});
我能第一個鏈接上添加.Hover但如果我在其他環節運行鼠標不起作用
如果我這樣做的話它的工作原理。 $(文件)。就緒(函數(){ $( 「#right_nav UL利A」)懸停(函數(){$ (本).addClass( 「懸停」);} , 功能(){ $(this).removeClass(「hover」); }); }); 但我現在可以看到,我必須擁有一個隱藏的類,並且當您將鼠標懸停在鏈接上時變爲可見 – Kasper 2012-04-04 13:51:55