鼠标事件
鼠标事件是当用户在文档上移动或单击鼠标时而产生的事件。
image.png
例：
image.png
代码：
<title>在mouseover事件中控制的下拉式菜单</title>
<style type="text/css">
*{
margin:0;
padding:0;
font-size:12px;
}
.nav{
background-color:#EEEEEE;
height:30px;
width:460px;
margin:0 auto;
}
ul{
list-style:none;
}
ul li{
float:left;
line-height:30px;
text-align:center;
}
a{
text-decoration:none;
color:#000000;
display:block;
width:90px;
height:30px;
border-style: solid;
border-width: 1px 1px 1px 1px;
border-color:white;
}
a:hover{
background-color:#666666;
color:#FFFFFF;
}
ul li ul li{
float:none;
background-color:#EEEEEE;
}
ul li ul{
display:none;
}
ul li ul li a:link,ul li ul li a:visited{
background-color:#EEEEEE;
}
ul li ul li a:hover{
background-color:#009933;
}
</style>
<script type="text/jscript" src="jquery-3.4.1.js"></script>
<script type="text/jscript">
$(document).ready(function(){
$(".navmenu").mouseover(function(){
$(this).children("ul").show();
});
$(".navmenu").mouseout(function(){
$(this).children("ul").hide();
});
});
</script>
</head>
<body>
<div id="nav" class="nav">
<ul>
<li><a href="#">网站首页</a></li>
<li class="navmenu">
<a href="#">家用电器</a>
<ul>
<li><a href="#">大家电</a></li>
<li><a href="#">生活电器</a></li>
<li><a href="#">五金套装</a></li>
<li><a href="#">厨房小电</a></li>
<li><a href="#">个护健康</a></li>
</ul>
</li>
<li class="navmenu">
<a href="#">运动户外</a>
<ul>
<li><a href="#">运动鞋包</a></li>
<li><a href="#">户外装备</a></li>
<li><a href="#" onClick="alert('运动服饰大甩卖了啊')">运动服饰</a></li>
<li><a href="#">体育用品</a></li>
<li><a href="#">垂钓用品</a></li>
<li><a href="#">健身训练</a></li>
</ul>
</li>
<li class="navmenu">
<a href="#">食品生鲜</a>
<ul>
<li><a href="#">中外名酒</a></li>
<li><a href="#">休闲食品</a></li>
<li><a href="#">进口食品</a></li>
<li><a href="#">地方特产</a></li>
<li><a href="#">饮料冲调</a></li>
<li><a href="#">粮油调味</a></li>
</ul>
</li>
<li><a href="#">关于我们</a></li>
</ul>
</div>
</body>
例：
image.png
代码：
<title>京东首页右侧固定层</title>
<link href="css/nav.css" rel="stylesheet">
<script type="text/jscript" src="js/jquery-1.12.4.js"></script>
<script type="text/jscript">
$(document).ready(function(){
$("#nav li span").mouseover(function(){
$(this).css("background-color","#c81623");
var index=$("#nav li span").index(this);
$("#nav li:eq("+index+") span~p").show();
});
$("#nav li span").mouseout(function(){
$(this).css("background-color","#7a6e6e");
var index=$("#nav li span").index(this);
$("#nav li:eq("+index+") span~p").hide();
});
});
</script>
</head>
<body>
<nav id="nav">
<li><span></span><p>就东会员</p></li>
<li><span></span><p>购物车</p></li>
<li><span></span><p>我的关注</p></li>
<li><span></span><p>我的足迹</p></li>
<li><span></span><p>我的消息</p></li>
<li><span></span><p>咨询JIMI</p></li>
</nav>
</body>
网友评论