Maison > Article > interface Web > Résumé des exemples d'utilisation du survol
Résumé des exemples d'utilisation du survol
- 小云云original
- 2018-01-06 09:11:112531parcourir
Cet article vous apporte principalement un exemple d'utilisation basé sur le survol (recommandé). L'éditeur pense que c'est plutôt bien, alors je vais le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.
//survoler, une autre façon de déplacer la souris vers l'intérieur et l'extérieur
<!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>Recommandations associées :
dans CSS Explication détaillée de l'utilisation du sélecteur de survol
Explication détaillée du conflit entre les événements de survol et de clic dans jQuery (image)
À propos de la bascule et cliquez dans jQuery Explication détaillée de l'utilisation du survol
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!