鼠標(biāo)經(jīng)過時(shí)清除固定樣式？
請(qǐng)問當(dāng)鼠標(biāo)經(jīng)過其他欄目時(shí)，清除‘網(wǎng)站首頁(yè)’的樣式，鼠標(biāo)離開時(shí)，“網(wǎng)站網(wǎng)頁(yè)”的樣式恢復(fù)，是怎么實(shí)現(xiàn)的
慕粉3283536
2017-05-25
4 回答
舉報(bào)
0/150
提交
取消
2017-10-13
.nav li a:hover{ background-color:#F60; color:#fff}
2017-08-15
這是一個(gè)事件
<!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>
2017-06-01
鼠標(biāo)事件
2017-05-26
:hover