????：<!DOCTYPE html><html><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equ
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" type="text/css" href="font-awesome/css/font-awesome.css"/>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<title>仿天貓超市左側(cè)商品導(dǎo)航</title>
<style type="text/css">
*{padding: 0;margin: 0;}
li{list-style: none;}
a{list-style-type: none;text-decoration: none;}
a:hover{cursor: pointer;}
#nav{width: 100%}
.nav_body{position: relative;width: 200px;margin-left:200px;background-color: #666;opacity: 0.6;color: #fff!important;border:0.5px solid red;}
.nav_body>ul>li{width: 100%;}
.nav_body>ul>li>a>i{padding-right: 8px;padding-left: 20px;}
.nav_body>ul>li>a{display: inline-block;padding-top: 10px;padding-bottom: 10px;width: 100%;}
.nav_body>ul>li:hover{background-color: #36B2F5!important;}
.nav_body_li_son{position: absolute;top: 0;left: 400px;width: 800px;height: 405px;border:3px solid red;display: none;}
</style>
</head>
<body>
<div id="nav">
<div>
<ul>
<li itm="1,2,3,4"><a> <i class="fa fa-hand-o-right"></i>導(dǎo)航 </a></li>
<li itm="2,2,3,4"><a> <i class="fa fa-hand-o-right"></i>導(dǎo)航 </a></li>
<li itm="3,2,3,4"><a> <i class="fa fa-hand-o-right"></i>導(dǎo)航 </a></li>
<li itm="4,2,3,4"><a> <i class="fa fa-hand-o-right"></i>導(dǎo)航 </a></li>
<li itm="5,2,3,4"><a> <i class="fa fa-hand-o-right"></i>導(dǎo)航 </a></li>
<li itm="6,2,3,4"><a> <i class="fa fa-hand-o-right"></i>導(dǎo)航 </a></li>
<li itm="7,2,3,4"><a> <i class="fa fa-hand-o-right"></i>導(dǎo)航 </a></li>
<li itm="8,2,3,4"><a> <i class="fa fa-hand-o-right"></i>導(dǎo)航 </a></li>
<li itm="9,2,3,4"><a> <i class="fa fa-hand-o-right"></i>導(dǎo)航 </a></li>
<li itm="10,2,3,4"><a> <i class="fa fa-hand-o-right"></i>導(dǎo)航 </a>
</li>
</ul>
</div>
<!--導(dǎo)航內(nèi)容區(qū)-->
<div></div>
</div>
<script type="text/javascript">
$(function(){
//mouse事件
/*$('.nav_body>ul>li').mouseover(function(){//鼠標(biāo)移上li時(shí) 加載li的信息
var t=$(this).attr('itm');
$('.nav_body_li_son').css('display','block').html(t);
})
$('.nav_body_li_son').mouseleave(function(){//鼠標(biāo)移出右側(cè)內(nèi)容時(shí)，隱藏
$(this).css('display','none')
})
$('.nav_body>ul>li').mouseleave(function(){//鼠標(biāo)移除li時(shí)， nav_body_li_son的顯示與隱藏。
$('.nav_body_li_son').mousemove(function(){
$('.nav_body_li_son').css('display','block')
})
$('.nav_body_li_son').css('display','none')
})*/
//hover方法
$(function(){
$('.nav_body>ul>li').hover(function(){
var t=$(this).attr('itm');
$('.nav_body_li_son').css('display','block').html(t);
},function(){
$('.nav_body_li_son').mouseover(function(){
$('.nav_body_li_son').css('display','block')
})
$('.nav_body_li_son').mouseout(function(){
$('.nav_body_li_son').css('display','none')
})
$('.nav_body_li_son').css('display','none');
})
})
})
</script>
</body>
</html>
?? ???：查無(wú)此人?? ??：2019-05-18 09:27:22
???? ??：完成的不錯(cuò)。每行js語(yǔ)句結(jié)束增加;號(hào)。繼續(xù)加油