5-2作业 右边导航问题
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>xiaobiaoti</title>
<script type="text/javascript" src="jQuery/jquery/jquery-1.12.4.min.js"></script>
<style>
.top-nav{
float: right;
margin:0;
padding:0;
}
.top-nav ul{
list-style: none;
}
.top-nav ul li{
display: inline-block;
vertical-align:top;
background:#f3f5f7;
border: 1px solid transparent;
border-radius: 4px;
}
.top-nav-list{
height:25px;
width: 90px;
margin:2px 2px;
}
.top-nav-list img{
position: relative;
top: 3px;
}
.top-nav-hidden a,
.goods{
display: block;
height:25px;
width: 90px;
margin:2px 2px;
}
.top-nav a{
text-decoration: none;
color: gray;
}
.top-nav-hidden{
display: none;
}
.top-nav a:hover{
color: red;
cursor: pointer;
}
</style>
</head>
<body>
<div class="top-nav">
<ul>
<li id="top-nav-one">
<div class="top-nav-list">
<span><a href="#">我的慕淘</a></span>
<span><img src="素材/icon/21.png" alt=""></span>
</div>
<div class="top-nav-hidden" id="hidden">
<a href="#">已买到的宝贝</a>
<a href="#">我的足迹</a>
</div>
</li>
<li id="top-nav-two">
<div class="top-nav-list">
<span><a href="#">收藏夹</a></span>
<span><img src="素材/icon/21.png" alt=""></span>
</div>
<div class="top-nav-hidden">
<a href="#">收藏的宝贝</a>
<a href="#">收藏的店铺</a>
</div>
</li>
<li><a href="#" class="goods">商品分类</a></li>
<li id="top-nav-four">
<div class="top-nav-list">
<span><a href="#">卖家中心</a></span>
<span><img src="素材/icon/21.png" alt=""></span>
</div>
<div class="top-nav-hidden">
<a href="#">免费开店</a>
<a href="#">已卖出的宝贝</a>
<a href="#">出售中的宝贝</a>
<a href="#">已卖出的宝贝</a>
<a href="#">卖家服务中心</a>
<a href="#">卖家培训中心</a>
<a href="#">体验中心</a>
</div>
</li>
<li id="top-nav-five">
<div class="top-nav-list">
<span><a href="#">联系客服</a></span>
<span><img src="素材/icon/21.png" alt=""></span>
</div>
<div class="top-nav-hidden">
<a href="#">消费者客服</a>
<a href="#">卖家客服</a>
</div>
</li>
</ul>
</div>
<script type="text/javascript" src="jQuery/index.js"></script>
</body>
</html>
js代码：
$('.top-nav-list').hover(function(){
$('#hidden').css('display','block')
$('#top-nav-one').css('border-color','gray')
},function(){
$('#hidden').css('display','none')
$('#top-nav-one').css('border-color','transparent')
});
$('#hidden').hover(function(){
$('#hidden').css('display','block')
$('#top-nav-one').css('border-color','gray')
},function(){
$('#hidden').css('display','none')
$('#top-nav-one').css('border-color','transparent')
});
当鼠标移动到 下拉菜单 ，还是会隐藏。就是第二段 js不起作用。
正在回答 回答被采纳积分+1
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星