table表随着鼠标移动背景变色(jQuery siblings())

jQuery siblings() 方法返回被选元素的所有同胞元素,并且可以使用可选参数来过滤对同胞元素的搜索。
实例1:
$(function(){
$("#table tr").mouseover(function(){
$(this).css("background-color", "#F4F4F4").siblings().css("background-color", "#FFFFFF");  
});
});


实例2:
html代码:
<div class="dd">
					<div class="dd-inner">
						<div class="item fore1 hover" data-index="1" >
							<h3><a target="_blank" href="www.baidu.com">建筑专业</a></h3>
					   		<i>&gt;</i> 
					   	</div>
						<div class="item fore2" data-index="2" >
							<h3><a target="_blank" href="www.baidu.com">结构专业</a></h3>
					   		<i>&gt;</i> 
					   	</div>
						<div class="item fore3" data-index="3" >
							<h3><a target="_blank" href="www.baidu.com">暖通空调专业</a></h3>
					   		<i>&gt;</i> 
					   	</div>
						<div class="item fore4" data-index="4" >
							<h3><a target="_blank" href="home.html">家居</a></h3>
					   		<i>&gt;</i> 
					   	</div>
						<div class="item fore5" data-index="5" >
							<h3><a target="_blank" href="1315-1342.html">男装</a></h3>
					   		<i>&gt;</i> 
					   	</div>
						<div class="item fore6" data-index="6" >
							<h3><a target="_blank" href="beauty.html">个护化妆</a></h3>
					   		<i>&gt;</i> 
					   	</div>
						<div class="item fore7" data-index="7" >
							<h3><a target="_blank" href="shoes.html">鞋靴</a></h3>
					   		<i>&gt;</i> 
					   	</div>
						<div class="item fore8" data-index="8" >
							<h3><a target="_blank" href="sports.html">运动户外</a></h3>
					   		<i>&gt;</i> 
					   	</div>
						<div class="item fore9" data-index="9" >
							<h3><a target="_blank" href="http://car.jd.com/">汽车</a></h3>
					   		<i>&gt;</i> 
					   	</div>
						<div class="item fore10" data-index="10" >
							<h3><a target="_blank" href="//baby.jd.com">母婴</a></h3>
					   		<i>&gt;</i> 
					   	</div>
						<div class="item fore11" data-index="11" >
							<h3><a target="_blank" href="food.html">食品</a></h3>
					   		<i>&gt;</i> 
					   	</div>
						<div class="item fore12" data-index="12" >
							<h3><a target="_blank" href="//health.jd.com">医药保健</a></h3>
					   		<i>&gt;</i> 
					   	</div>
						<div class="item fore13" data-index="13" >
							<h3><a target="_blank" href="//book.jd.com/">图书</a></h3>
					   		<i>&gt;</i> 
					   	</div>
						<div class="item fore14" data-index="14" >
							<h3><a target="_blank" href="//caipiao.jd.com/">彩票</a></h3>
					   		<i>&gt;</i> 
					   	</div>
						<div class="item fore15" data-index="15" >
							<h3><a target="_blank" href="//licai.jd.com/">理财</a></h3>
					   		<i>&gt;</i> 
					   	</div>
					</div>
				</div>

js代码
$(function(){
				$(".dd-inner .item").mouseover(function(){
					$(this).siblings().removeClass("hover");
			        $(this).addClass("hover");			        
				});
			});

猜你喜欢

转载自wj-geyuan.iteye.com/blog/2313516