<body>
<div class="container">
<div class="nav1st">
<div class="nav-container">
<div class="nav-logo">
<img src="https://img.uj5u.com/2020/10/10/150226100421101.png">
<p>行業效率顛覆者</p>
</div>
<ul class="nav-ul">
<li><a href="https://bbs.csdn.net/topics/#">首頁</a></li>
<li><a href="https://bbs.csdn.net/topics/#" id="product" class="fff&&ffe1b5">產品中心</a></li>
<li style="display: none;">
<a href="https://bbs.csdn.net/topics/#">解決方案</a>
</li>
<li><a href="https://bbs.csdn.net/topics/#">合作聯盟</a></li>
<li><a href="https://bbs.csdn.net/topics/#">新聞中心</a></li>
<li><a href="https://bbs.csdn.net/topics/#">關于我們</a></li>
<li><a href="https://bbs.csdn.net/topics/#">運營平臺登陸</a></li>
<div style="clear:both;"></div>
</ul>
<div style="clear:both;"></div>
</div>
</div>
<div class="nav2nd">
<div class="nav-container">
<ul class="2nd">
<li><a href="https://bbs.csdn.net/topics/#" class="lszd1&&lszd2" id="lszd">智能零售終端</a></li>
<li><a href="https://bbs.csdn.net/topics/#" id="yypt">智能運營平臺</a></li>
<li><a href="https://bbs.csdn.net/topics/#" id="znjy">智能硬體</a></li>
<li><a href="https://bbs.csdn.net/topics/#" id="ythgm">一體化柜門</a></li>
</ul>
</div>
<div class="none"></div>
</div>
<div class="nav3rd">
<div class="nav-container">
<ul>
<li><a href="https://bbs.csdn.net/topics/#">
<img src="https://img.uj5u.com/2020/10/10/150226100421102.png">
<p>光芽自動售歡訓</p>
</a></li>
<li><a href="https://bbs.csdn.net/topics/#">
<img src="https://img.uj5u.com/2020/10/10/150226100421103.png">
<p>光芽生鮮機</p>
</a></li>
<li><a href="https://bbs.csdn.net/topics/#">
<img src="https://img.uj5u.com/2020/10/10/150226100421104.png">
<p>光芽現磨咖啡機</p>
</a></li>
<li><a href="https://bbs.csdn.net/topics/#">
<img src="https://img.uj5u.com/2020/10/10/150226100421105.png">
<p>光芽制冷售歡訓</p>
</a></li>
<li><a href="https://bbs.csdn.net/topics/#">
<img src="https://img.uj5u.com/2020/10/10/150226100421106.png">
<p>光芽小型售歡訓</p>
</a></li>
<li><a href="https://bbs.csdn.net/topics/#">
<img src="https://img.uj5u.com/2020/10/10/150226100421107.png">
<p>光芽冷熱沖飲機</p>
</a></li>
</ul>
</div>
</div>
</div><!--導航1結束-->
<script>
var i = $(".nav-ul li").index();
var t = $(".2nd li").index();
var p = 0;
$(".nav-ul li").mouseover(function () {
i = $(this).index();
})
$(".2nd li").mouseover(function () {
t = $(this).index();
})
$("#product").mouseenter(function () {
if (i == 1 && p == 0) {
$(".nav2nd").show();
$("#product").removeClass("fff");
$("#product").addClass("ffe1b5");
} else {
$(".nav2nd").slideDown();
$("#product").removeClass("fff");
$("#product").addClass("ffe1b5");
p = 0;
}
});
$("#product").mouseleave(function () {
$(".nav2nd").hide();
$("#product").removeClass("ffe1b5");
$("#product").addClass("fff");
});
$(".nav2nd").mouseenter(function () {
$(".nav2nd").show();
$("#product").removeClass("fff");
$("#product").addClass("ffe1b5");
});
$(".nav2nd").mouseleave(function () {
$(".nav2nd").hide();
$("#product").removeClass("ffe1b5");
$("#product").addClass("fff");
});
$(".none").mouseenter(function () {
p = 1;
$(".nav2nd").hide();
$("#product").removeClass("ffe1b5");
$("#product").addClass("fff");
});
$("#lszd").mouseenter(function () {
if (t == 0) {
$(".nav3rd").show();
$("#lszd").removeClass("lszd1");
$("#lszd").addClass("lszd2");
i = 1;
} else {
$(".nav3rd").slideDown();
$("#lszd").removeClass("lszd1");
$("#lszd").addClass("lszd2");
}
});
$("#lszd").mouseleave(function () {
$(".nav3rd").hide();
$("#lszd").removeClass("lszd2");
$("#lszd").addClass("lszd1");
});
$(".nav3rd").mouseenter(function () {
$(".nav2nd").show();
$(".nav3rd").show();
$("#lszd").removeClass("lszd1");
$("#lszd").addClass("lszd2");
$("#product").removeClass("fff");
$("#product").addClass("ffe1b5");
});
$(".nav3rd").mouseleave(function () {
$(".nav2nd").hide();
$(".nav3rd").hide();
$("#lszd").removeClass("lszd2");
$("#lszd").addClass("lszd1");
$("#product").removeClass("ffe1b5");
$("#product").addClass("fff");
t = 0;
i = 0;
});
</script>
</body>
</html>
uj5u.com熱心網友回復：
有引入jq嗎？ffe1b5 fff不應該是顏色？class名？可以去看看tab的實作代碼吧uj5u.com熱心網友回復：
對的，沒有引入，謝謝uj5u.com熱心網友回復：
應該是沒參考jquery，我copy代碼參考jquery可以有滑鼠懸停和離開效果轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/165543.html
標籤：HTML(CSS)
上一篇：有北斗時間的api介面
下一篇：微信小程式開發問題