基于hover的用法实例(推荐)
程序员文章站
2023-09-08 22:20:13
//hover,鼠标移入移出的另一种用法
//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的用法实例(推荐)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。