logo区购物车下面的下拉菜单。
来源：5-2 作业题
qq_鸭绿桥第一帅哥_0
2019-02-21 12:22:29
logo区购物车下面的下拉菜单，无法实现鼠标触碰下拉菜单的时候，下拉菜单出现在屏幕上。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>5-2</title>
<link rel="stylesheet" type="text/css" href="css/5-2zuoye.css">
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<script type="text/javascript" src="js/5-2zuoye.js"></script>
</head>
<body>
<!-- 大容器 -->
<div class="wrap">
<!-- 设置container是为了设置背景颜色 -->
<div class="container">
<!-- 顶部区 -->
<div class="header">
<ul class="headerleft">
<li class="dropdown-menu" id="one"><a href="#">亲，请登录</a></li>
<li class="dropdown-menu"><a href="#">免费注册</a></li>
<li class="dropdown-menu"><a href="#">手机逛慕淘</a></li>
</ul>
<ul class="headerright">
<li class="dropdown-menu1 menu1">
<a href="#">我的慕淘</a><img src="sucai/icon/21.png">
<ul class="dropdown-menu3">
<li>已买到的宝贝</li>
<li>我的慕淘</li>
</ul>
</li>
<li class="dropdown-menu1">
<a href="#">收藏夹</a><img src="sucai/icon/21.png">
<ul class="dropdown-menu3">
<li>收藏的宝贝</li>
<li>收藏的店铺</li>
</ul>
</li>
<li class="dropdown-menu5"><a href="#">商品分类</a></li>
<li class="dropdown-menu1">
<a href="#">卖家中心</a><img src="sucai/icon/21.png">
<ul class="dropdown-menu3">
<li>免费开店</li>
<li>已卖出的宝贝</li>
<li>出售中的宝贝</li>
<li>卖家服务市场</li>
<li>卖家培训中心</li>
<li>体验中心</li>
</ul>
</li>
<li class="dropdown-menu1">
<a href="#">联系客服</a><img src="sucai/icon/21.png">
<ul class="dropdown-menu3">
<li>消费者客服</li>
<li>卖家客服</li>
</ul>
</li>
</ul>
</div>
<!-- logo区 -->
<div class="logo">
<div class="logoleft"><a href="#"><img src="sucai/logo.png"></a></div>
<div class="logocenter">
<input type="text" placeholder="灵魂美食一元抢" class="sousuo">
<input type="button" value="搜索" class="btn">
</div>
<div class="logoright">
<div class="cart">
<div class="cart1"><img src="sucai/icon/26.png"> <span>购物车</span></div>
<div class="num"><span>0</span><img src="sucai/icon/23.png"></div>
</div>
<!-- 下拉菜单 -->
<div class="cartmenu">
<ul class="cartul">
<li class="cartli">
<img src="sucai/cart/1.png">
<span class="brand">adidas 阿迪达斯 训练 男子 ×</span><br />
<span class="price">￥335×1</span>
</li>
<li class="cartli">
<img src="sucai/cart/2.png">
<span class="brand">adidas 阿迪达斯 训练 男子 ×</span><br />
<span class="price">￥335×1</span>
</li>
<li class="cartli">
<img src="sucai/cart/2.png">
<span class="brand">adidas 阿迪达斯 训练 男子 ×</span><br />
<span class="price">￥335×1</span>
</li>
<li class="cartli">
<img src="sucai/cart/2.png">
<span class="brand">adidas 阿迪达斯 训练 男子 ×</span><br />
<span class="price">￥335×1</span>
</li>
<li class="cartli">
<img src="sucai/cart/2.png">
<span class="brand">adidas 阿迪达斯 训练 男子 ×</span><br />
<span class="price">￥33×1</span>
</li>
<li class="cartli">
<img src="sucai/cart/2.png">
<span class="brand">adidas 阿迪达斯 训练 男子 ×</span><br />
<span class="price">￥335×1</span>
</li>
<li class="cartli">
<img src="sucai/cart/2.png">
<span class="brand">adidas 阿迪达斯 训练 男子 ×</span><br />
<span class="price">￥335×1</span>
</li>
<li class="cartli">
<img src="sucai/cart/2.png">
<span class="brand">adidas 阿迪达斯 训练 男子 ×</span><br />
<span class="price">￥335×1</span>
</li>
<li class="cartli">
<img src="sucai/cart/2.png">
<span class="brand">adidas 阿迪达斯 训练 男子 ×</span><br />
<span class="price">￥335×1</span>
</li>
<li class="cartli">
<img src="sucai/cart/2.png">
<span class="brand">adidas 阿迪达斯 训练 男子 ×</span><br />
<span class="price">￥335×1</span>
</li>
</ul>
</div>
<div class="shop">最新加入的商品</div>
<div class="shop1">共27件商品 <span>共计￥0.00</span> <button>去购物车</button></div>
</div>
</div>
</div>
<!-- 导航 -->
<div class="nav"></div>
<!-- banner区 -->
<div class="banner"></div>
<!-- 右导航 -->
<div class="rightsidebar"></div>
<!-- 楼层区 -->
<div class="louceng"></div>
<!-- 友情链接 -->
<div class="lianjie"></div>
<!-- 页脚 -->
<div class="footer"></div>
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
list-style: none;
}
a{
text-decoration: none;
}
/* 大容器 */
.wrap{
width: 100%;
}
/* container */
.container{
width: 100%;
background: #f3f5f7;
/* overflow: hidden; */
/* zoom: 1; */
}
/* header区 */
.header{
width: 70%;
margin: 0 auto;
border-bottom: 1px solid #C0C0C0;
height: 44px;
}
.headerleft,.headerright{
/* overflow: hidden; */
/* zoom: 1; */
height: 44px;
line-height: 44px;
}
.headerleft{
float: left;
}
.headerright{
float: right;
}
.dropdown-menu{
float: left;
font-size: 10px;
padding-left: 15px;
}
.dropdown-menu a,.dropdown-menu1 a,.dropdown-menu5 a{
color: gray;
}
#one a{
color: red;
}
.dropdown-menu a:hover,.dropdown-menu1 a:hover,.dropdown-menu5 a:hover{
color: red;
}
.dropdown-menu1,.dropdown-menu5{
box-sizing: border-box;
float: left;
font-size: 10px;
padding-left: 15px;
width: 120px;
/* text-align: center; */
}
.dropdown-menu5{
width: 120px;
display: block;
}
.dropdown-menu1{
position: relative;
height: 44px;
}
.dropdown-menu3{
position: absolute;
top: 43px;
display: none;
cursor: pointer;
}
.dropdown-menu1:hover{
display: block;
border: 1px solid #C0C0C0;
background: white;
border-bottom: none;
/* margin-bottom: -2px; */
}
.dropdown-menu1:hover .dropdown-menu3{
display: block;
position: absolute;
z-index: 2;
background: white;
width: 120px;
border: 1px solid #C0C0C0;
box-sizing: border-box;
/* padding-left: 10px; */
left: -1px;
border-top: none;
}
.dropdown-menu3 li{
padding-left: 10px;
}
.dropdown-menu3 li:hover{
background: #cdd0d4;
}
/* logo区 */
.logo{
width: 70%;
margin: 0 auto;
overflow: hidden;
zoom: 1;
margin-top: 50px;
}
.logoleft,.logocenter,.logoright{
float: left;
}
.logoleft{
padding-left: 160px;
box-sizing: border-box;
}
.logocenter{
position: relative;
box-sizing: border-box;
margin-left: 120px;
margin-right: 150px;
}
.sousuo{
width: 530px;
height: 40px;
/* position: absolute; */
/* left: 0px; */
}
.btn{
width: 80px;
height: 43px;
background: black;
color: white;
border: none;
position: absolute;
left: 534px;
top: 0px;
}
/* 购物车 */
.cart{
width: 200px;
/* border: 1px solid red; */
overflow: hidden;
zoom: 1;
height: 50px;
line-height: 50px;
background: red;
box-shadow: 0 0 10px 0 rgba(8, 1, 3,0.3)
}
.cart1{
width: 120px;
border-right: 1px solid white;
padding-left: 15px;
box-sizing: border-box;
height: 30px;
margin-top: 10px;
line-height: 30px;
}
.cart:hover .cart1{
border-right: 1px solid #cdd0d4;
}
.cart1,.num{
float: left;
color: white;
}
.num{
box-sizing: border-box;
padding-left: 20px;
}
.cart span{
font-size: 10px;
}
.cart:hover{
background: white;
}
.cart:hover span{
color: red;
}
/* 购物车下拉菜单 */
.logo{
/* height: 500px; */
width: 95%;
}
.logoright{
position: relative;
height: 500px;
}
.cartmenu{
width: 250px;
position: absolute;
z-index: 1;
height: 265px;
overflow-y: scroll;
background: white;
top: 100px;
}
.cartul{
padding-left: 10px;
padding-right: 10px;
}
.cartli{
position: relative;
border-top: 1px solid gray;
/* padding-left: 10px;
padding-right: 10px; */
}
.cartmenu .brand{
font-size: 10px;
color: gray;
position: absolute;
top: 0;
}
.cartmenu .brand:hover{
color: red;
}
.price{
font-size: 10px;
position: absolute;
top: 25px;
left: 55px;
}
.shop{
position: absolute;
z-index: 3;
font-size: 10px;
background: white;
height: 50px;
line-height: 50px;
box-sizing: border-box;
padding-left: 20px;
width: 250px;
}
.shop1{
position: absolute;
z-index: 3;
top: 365px;
font-size: 10px;
background: white;
height: 70px;
line-height: 70px;
width: 250px;
}
.shop1 button{
background: red;
height: 40px;
width: 100px;
color: white;
border: none;
border-radius: 2px;
cursor: pointer;
}
.shop1 span{
font-size: 8px;
}
.cartmenu,.shop,.shop1{
display: none;
}
.cart:hover~.cartmenu{
display: block;
}
.cart:hover~.shop1{
display: block;
}
.cart:hover~.shop{
display: block;
}
.shop:hover{
display: block;
}
.shop:hover~.shop1{
display: block;
}
.shop:hover~.cartmenu{
display: block;
}
$(document).ready(function(){
// 顶部右侧下箭头图片切换
$('.dropdown-menu1').hover(function(){
$(this).children('img').attr('src','sucai/icon/24.png')
},function(){
$(this).children('img').attr('src','sucai/icon/21.png')
})
// logo区购物车图片切换
$('.cart').hover(function(){
$(this).find('.cart1 img').attr('src','sucai/icon/25.png');
$(this).find('.num img').attr('src','sucai/icon/24.png');
},function(){
$(this).find('.cart1 img').attr('src','sucai/icon/26.png');
$(this).find('.num img').attr('src','sucai/icon/23.png');
})
})写回答
1回答
-
你好同学 ,因为hover是给购物车按钮设置的 ,所以当你离开这个按钮 ,就会触发下拉菜单隐藏 .所以要给按钮和下拉菜单的父元素设置hover , 这样不管是移入按钮还是下拉菜单 ,都是作用在大盒子的hover样式 :
希望对你有帮助 ,祝学习愉快 ,望采纳 .
0
相似问题