hover的用法实例总结

来源：动视网责编：小OO 时间：2020-11-27 20:07:19

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"；>。

推荐度：

点击下载本文 文档为doc格式

导读//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"；>。

本文主要为大家带来一篇基于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>
<p id="nav">
 <p class="navsBox">
 <p class="firstNav">购物特权</p>
 <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>
 </p>
</p>
</body>
</html>

hover的用法实例总结

推荐度：

点击下载本文 文档为doc格式

标签：用法总结用法总结

热门焦点

hover的用法实例总结

hover的用法实例总结

hover的用法实例总结

最新推荐

猜你喜欢

热门推荐