Posted in Javascript onJuly 04, 2017
//hover,鼠标移入移出的另一种用法
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>左导航特效</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
font-size: 12px;
}
#nav .navsBox {
width: 160px;
}
#nav .navsBox .firstNav {
height:45px;
line-height:45px;
background-color:#EBEBEB;
border-left:10px solid #FE705C;
padding-left:20px;
width:130px;
font-weight:bold;
cursor: pointer;
}
#nav .navsBox ul {
display:none;
list-style:none;
}
#nav .navsBox ul li {
display:block;
height:45px;
line-height:45px;
padding-left:70px;
width:90px;
background-color:#F2F2F2;
background-position:33px 7px;
background-repeat:no-repeat;
}
#nav .navsBox ul li.jedh {
background-image:url("./images/huan.gif");
}
#nav .navsBox ul li.jlbbyk {
background-image:url("./images/you.gif");
}
#nav .navsBox ul li.jwljb {
background-image:url("./images/gouwu.gif");
}
#nav .navsBox ul li.mrljb {
background-image:url("./images/meiri.gif");
}
#nav .navsBox ul li.vipjtj {
background-image:url("./images/zhe.gif");
}
#nav .navsBox ul li.onbg {
background-color:#F9DBD1;
}
#nav .navsBox ul li a {
color:#000;
text-decoration:none;
}
</style>
<script src="js/jquery-1.11.3.min.js"></script>
<script>
$(function () {
$(".firstNav").click(function () {
var $ul= $(this).next();
if($ul.is(":visible")){
$ul.hide();
}else{
$ul.show();
$ul.children().hover(function () {
$(this).addClass("onbg");
},function () {
$(this).removeClass("onbg")
})
}
})
})
</script>
</head>
<body>
<div id="nav">
<div class="navsBox">
<div class="firstNav">购物特权</div>
<ul>
<li class="jedh"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >全额兑换</a></li>
<li class="jlbbyk"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >俱乐部包邮卡</a></li>
<li class="jwljb"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >购物领金币</a></li>
<li class="mrljb"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >每日领金币</a></li>
<li class="vipjtj"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >VIP阶梯价</a></li>
</ul>
</div>
</div>
</body>
</html>
以上这篇基于hover的用法实例(推荐)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持三水点靠木。
基于hover的用法实例(推荐)
- Author -
jingxian声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@