<div class="div"><span class="span"></span><a href="javascrip:void(0)" class="a"><img src="pp/pp.jpg" border="0"/></a></div>想做.div下面對應(yīng)的span顯示和隱藏$(document).ready(function(){ //這個就是傳說的ready$(".div").mouseover(function(){ $(".span").addClass("spancs");}).mouseout(function(){$(".span").removeClass("spancs");})});鼠標進入就顯示樣式鼠標移出就取消樣式樣式里面是顯示和隱藏。但我做的時候因為.div是循環(huán)輸出的有好多。。所以它下面的span也有好多。所以得出來的結(jié)果是鼠標移近去的時候頁面上所有的span都顯示了。郁悶如果用$(".div").mouseover(function(){ $(this).addClass("overline");}).mouseout(function(){$(this).removeClass("overline");})這樣的話就可以。但是我要的是div里面的span啊。拿不到對應(yīng)的。
2 回答
精慕HU
TA貢獻1845條經(jīng)驗 獲得超8個贊
借助jquery的兩個函數(shù)：find()和hide()可以實現(xiàn)這個效果
1 | $("div").find("span").hide(); |
實例演示：點擊三個div中的任一個，將隱藏被點擊div下的span
創(chuàng)建Html元素
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <div class="box"> <span>點擊div后隱藏相應(yīng)的span：</span> <div class="content"> <span>我是第一個div下的span</span> <p>我是個p，所以不會被隱藏。</p> </div> <div class="content"> <span>我是第二個div下的span</span> <p>我是個p，所以不會被隱藏。</p> </div> <div class="content"> <span>我是第三個div下的span</span> <p>我是個p，所以不會被隱藏。</p> </div> </div> |
設(shè)置css樣式
1 2 3 | div.box{width:300px;padding:20px;margin:20px;border:4px dashed #ccc;} div.box span{color:#999;font-style:italic;} div.content{width:250px;margin:10px 0;padding:20px;border:2px solid #ff6666;} |
編寫jquery代碼
1 2 3 4 5 | $(function(){ $(".content").click(function() { $(this).find("span").hide(); }); }) |
觀察效果
初始樣式
點擊第二個div的效果
瀟瀟雨雨
TA貢獻1833條經(jīng)驗 獲得超4個贊
$(".div").mouseover(function(){
$(this).find(".span").addClass("overline");}).mouseout(function(){
$(this).find(".span").removeClass("overline");
})
- 2 回答
- 0 關(guān)注
- 918 瀏覽
添加回答
舉報
0/150
提交
取消