鼠标经过时清除固定样式？
请问当鼠标经过其他栏目时，清除‘网站首页’的样式，鼠标离开时，“网站网页”的样式恢复，是怎么实现的
4 回答
这是一个事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{margin: 0;padding: 0;list-style: none;}
body{background-color: #323232;}
.tab{margin: 100px;width: 250px;height: 200px;}
.tab ul.tab-nav{height: 30px}
.tab ul li{ color:#fff; padding: 5px;height: 20px;border-radius: 3px 3px 0 0; background-color: #767676;float: left;margin-right: 5px;}
.tab ul li a{display: inline-block;color: #fff;text-decoration: none;}
.tab ul li.actived{background-color: #fff;}
.tab ul li.actived a{color: #555;}
.wrap{width: 250px;height: 180px; padding: 3px; background-color: #fff;}
.wrap .content-item{width: 250px;height: 180px;position: absolute;}
.wrap .content-item img{width: 250px;height: 180px; display: none;}
.wrap .content-item.current img{display: block;}
</style>
</head>
<body>
<div class="js-tab tab">
<ul class="tab-nav">
<li class="actived"><a href="javascript:">新闻</a></li>
<li><a href="javascript:">娱乐</a></li>
<li><a href="javascript:">电影</a></li>
<li><a href="javascript:">科技</a></li>
</ul>
<div class="wrap">
<div class="content-item current"><img src="img/photos-play1.png"></div>
<div class="content-item"><img src="img/photos-play2.png"></div>
<div class="content-item"><img src="img/photos-play3.png"></div>
<div class="content-item"><img src="img/photos-play4.png"></div>
</div>
</div>
</body>
<script type="text/javascript" src="js/jquery.1.10.2.js"></script>
<script>
$(".js-tab ul li").mouseover(function(){
var index=$(this).index();
$(".js-tab ul li").eq(index).addClass("actived").siblings().removeClass("actived");
$(".js-tab .wrap .content-item").eq(index).addClass("current").siblings().removeClass("current");
})
</script>
</html>
举报
0/150
提交
取消
