abstrakt:<!DOCTYPE html><html><head><meta charset="UTF-8"><title>三級(jí)導(dǎo)航</title><script type="text/javascript" src="jquery-3.3.1.min.js"><
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>三級(jí)導(dǎo)航</title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<style type="text/css">
*{margin:0px ;padding: 0px;}
.top{width: 1200px;height: 36px;margin: 0px auto;margin-top: 60px;}
ul,li{list-style: none;}
ul li{width: 150px;height:36px;line-height: 36px;text-align: center;font-size: 16px;float: left;cursor: pointer;background-color: #f1f1f1;}
.one > li{border-right: 2px solid lightblue;}
.one > li:last-child{border-right: none;}
.tow{display: none;}
.tow > li{width: 150px;height: 36px;position: relative;border: 0px;border-top: 1px solid lightblue;}
.three {position: absolute; top: 0px;left: 150px;}
.three li {width: 150px;height: 36px;line-height: 36px;border: 0;border-top: 1px solid lightblue;}
.current{background-color: lightblue;font-weight: bold}
</style>
</head>
<body>
<div>
<ul>
<li>首頁</li>
<li>產(chǎn)品介紹
<ul>
<li>新產(chǎn)品</li>
<li>拳頭產(chǎn)品</li>
<li>實(shí)驗(yàn)產(chǎn)品</li>
</ul>
</li>
<li>新聞中心
<ul>
<li>公司新聞</li>
<li>行業(yè)新網(wǎng)</li>
<li>國家新聞
<ul>
<li>行業(yè)</li>
<li>軍事</li>
<li>文娛</li>
</ul>
</li>
</ul>
</li>
<li>關(guān)于我們</li>
<li>聯(lián)系我們</li>
</ul>
</div>
</body>
<script type="text/javascript">
$(document).ready(function(){
$('.one>li').mouseover(function() {
$(this).find('.tow').slideDown(500)
})
$('.one>li').mouseout(function() {
$(this).find('.tow').slideUp(500)
})
$('.tow').mouseover(function(){
$(this).find('.three').slideDown(500)
})
$('.tow').mouseleave(function(){
$(this).find('.three').slideUp(500)
})
})
</script>
</html>
老師為什么我的導(dǎo)航鼠標(biāo)移上,動(dòng)一下它就執(zhí)行向下拉伸效果?
Korrigierender Lehrer:滅絕師太Korrekturzeit:2019-03-18 16:57:04
Zusammenfassung des Lehrers:mouseover和mouseout在父元素和其子元素都可以觸發(fā),mouseleave只在父元素觸發(fā),當(dāng)鼠標(biāo)穿過一個(gè)元素時(shí),只會(huì)觸發(fā)一次