老师有疑问
来源：3-5 自由编程
vivi_li
2020-05-28 14:57:14
鼠标移入购物车样式 那个采用伪元素方法遮盖那个底部阴影的方法 目前有个小问题，不是同步改变，过渡有些生硬，请老师帮忙看下
index.css
/*nav-site*/
.nav-site{
width: 100%;
background-color: #f3f5f7;
}
.nav-site .container{
height: 44px;
line-height: 44px;
border-bottom: 1px solid #cdd0d4;
}
.nav-site-login{
color: #f01414;
margin-left: 15px;
}
.nav-site-signup,
.nav-site-mobile{
margin-left: 10px;
}
.nav-site-category{
margin: 0 10px;
}
.nav-site-service{
margin-right: 15px;
}
/*header*/
.header{
width: 100%;
background-color: #f3f5f7;
height: 124px;
}
.header .search,
.header-logo,
.header .cart{
margin-top: 36px;
}
.header-logo{
display: block;
width: 136px;
height: 48px;
margin-left: 15px;
background: url(../img/header-logo.png) no-repeat;
}
.header .search{
margin-left: 145px;
}
.header .cart{
margin-right: 15px;
}
/*cart*/
.cart{
background-color: #fff;
z-index: 0;
}
.cart>a{
display: block;
color: #fff;
width: 158px;
background-color: #f01414;
height: 40px;
text-align: center;
line-height: 40px;
font-size: 14px;
border: 1px solid #f01414;
}
.cart:hover>a{
color: #f01414;
background-color: #fff;
border-color: #e9e9e9;
box-shadow: 0 0 3px rgba(0, 0, 0,.1);
}
.cart-line{
margin: 0 15px 0 13px;
}
.cart:hover .dropdown-toggle:after{
content: "";
display: block;
width: 158px;
height: 5px;
background-color: #fff;
position: absolute;
bottom: -3px;
transition: all 0.5s .5s;
}
common
/*公共样式*/
.container {
width: 1200px;
margin: 0 auto;
}
.link {
color: #4d555d;
}
.link:hover {
color: #f01414;
}
[class*="-active"] .dropdown-arrow { /*属性包含-active元素*/
transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
}
.transition {
transition: all .2s;
}
.dropdown-loading {
width: 32px;
height: 32px;
background: url(../img/loading.gif) no-repeat;
margin: 20px;
}
.text-hidden {
text-indent: -999px;
overflow: hidden;
}
/*文字溢出省略*/
.text-ellipsis {
text-overflow: ellipsis; /*文字溢出隐藏*/
white-space: nowrap; /*不换行*/
overflow: hidden;
}
/*icon*/
@font-face {
font-family: "iconfont";
src: url('../font/iconfont.eot?t=1477124206');
/* IE9*/
src: url('../font/iconfont.eot?t=1477124206#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../font/iconfont.woff?t=1477124206') format('woff'), /* chrome, firefox */ url('../font/iconfont.ttf?t=1477124206') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ url('../font/iconfont.svg?t=1477124206#iconfont') format('svg');
/* iOS 4.1- */
}
.icon {
font-family: "iconfont" !important;
font-size: 10px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
}
/*showHide*/
.fadeOut {
visibility: hidden !important; /*占位，但隐藏时不会触发绑定事件*/
opacity: 0 !important;
}
.slidUpDownCollapse {
height: 0 !important; /*如果不设置，会因为优先级的问题导致高度不起作用*/
padding-top: 0 !important; /*如果不设置，会因为优先级的问题导致高度不起作用*/
padding-bottom: 0 !important; /*如果不设置，会因为优先级的问题导致高度不起作用*/
}
.slideLeftRightCollapse {
width: 0 !important; /*如果不设置，会因为优先级的问题导致高度不起作用*/
padding-left: 0 !important; /*如果不设置，会因为优先级的问题导致高度不起作用*/
padding-right: 0 !important; /*如果不设置，会因为优先级的问题导致高度不起作用*/
}
/*dropdown*/
/*dropdown*/
.dropdown {
position: relative;
}
.dropdown-toggle {
position: relative;
z-index: 2;
}
.dropdown-arrow {
display: inline-block;
background-repeat: no-repeat;
vertical-align: middle;
}
.dropdown-layer {
display: none;
position: absolute;
z-index: 1;
}
.dropdown-left {
left: 0;
right: auto;
}
.dropdown-right {
right: 0;
left: auto;
}
/*menu dropdown*/
.menu .dropdown-toggle {
display: block;
height: 44px; /*此处不可以设置高度为100% 否则底部边框不显示*/
padding: 0 16px 0 12px;
border-left: 1px solid #f3f5f7; /*需要设置边框，但是跟背景颜色一样，否则hover的时候布局会变动*/
border-right: 1px solid #f3f5f7;
}
.menu .dropdown-arrow {
margin-left: 8px;
}
.menu .dropdown-layer {
top: 43px;
background-color: #fff;
border: 1px solid #cdd0d4;
}
.menu-item {
display: block;
color: #4d555d;
padding: 0 12px;
height: 30px;
line-height: 30px;
}
.menu-item:hover {
background-color: #f3f5f7;
}
.menu-active .dropdown-toggle {
border-color: #cdd0d4;
background-color: #fff;
}
/* cart dropdown*/
i.dropdown-cart{
margin-right: 14px;
border-bottom: none;
}
.cart i:nth-child(2){
margin-left: 14px;
}
.cart .dropdown-layer{
padding-left: 12px;
font-size: 14px;
border: 1px solid #d9dde1;
min-width: 278px;
top: 41px;
box-shadow: 0 0 3px rgba(0, 0, 0,.1);
background-color: #fff;
/*overflow: auto;*/
}
.cart-bd{
height: 52px;
line-height: 52px;
color: #000;
border-bottom: 1px solid #d9dde1;
text-indent: 12px;
margin-right: 30px;
}
.cart .dropdown-layer .cart-item{
height: 44px;
padding: 10px;
border-bottom: 1px solid #d9dde1;
}
.cart-item .cart-detail{
max-width: 145px;
margin-left: 15px;
cursor: pointer;
}
.cart-item .cart-detail-title{
width: 145px;
color: #4d555d;
margin-top: 6px;
font-size: 12px;
}
.cart-content{
max-height: 335px;
overflow: auto;
padding-right: 10px;
}
.word-nowrap{
overflow: hidden;
white-space: nowrap;
}
.cart-item .cart-delete{
margin-top: 5px;
}
.cart-detail-price{
margin-top: 10px;
color: #4d555d;
font-weight: 700;
}
.cart-ft{
padding-left: 12px;
height: 68px;
line-height: 68px;
color: #000;
font-size: 12px;
}
.cart-ft-price{
font-size: 8px;
}
.cart-ft-price::before{
content: " ￥";
display: inline-block;
font-size: 8px;
}
.cart-ft-linkCart{
display: inline-block;
width: 80px;
height: 35px;
border-radius: 3px;
background-color: #f01410;
line-height: 35px;
color: #fff;
cursor: pointer;
text-align: center;
margin-top: 15px;
margin-right: 20px;
}
/*search*/
.search {
position: relative;
border: 1px solid #cfd2d5;
}
.search-inputbox {
width: 585px;
height: 40px;
line-height: 40px;
padding: 0 10px;
background-color: #fff;
}
.search-btn {
width: 73px;
height: 40px;
background-color: #07111b;
color: #fff;
font-size: 14px;
line-height: 40px;
text-align: center;
cursor: pointer;
}
.search-layer {
display: none;
position: absolute;
top: 100%;
left: -1px;
width: 100%;
background-color: #fff;
border: 1px solid #cfd2d5;
}
.search-layer-item {
height: 24px;
line-height: 24px;
padding: 0 10px;
cursor: pointer;
}
.search-layer-item:hover {
background-color: #f3f5f7;
}
cart json
[
{
"url": "img/1.png",
"detail": "adidas 阿迪达斯 训练 男子",
"price": "355",
"count": 1
},
{
"url": "img/2.png",
"detail": "玉兰油多效修护三部曲套装",
"price": "199",
"count": 2
},
{
"url": "img/3.png",
"detail": "Apple iPhone 7 (A1660)",
"price": "6188",
"count": 1
},
{
"url": "img/4.png",
"detail": "飞利浦面条机 HR2356/31",
"price": "659",
"count": 4
},
{
"url": "img/5.png",
"detail": "罗技G29力反馈游戏方向",
"price": "355",
"count": 1
},
{
"url": "img/5.png",
"detail": "罗技G29力反馈游戏方向",
"price": "355",
"count": 1
},
{
"url": "img/5.png",
"detail": "罗技G29力反馈游戏方向",
"price": "355",
"count": 1
}
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>慕淘网</title>
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<!--站点导航-->
<div class="nav-site">
<div class="container">
<ul class="fl">
<li class="fl"><a href="javascript:;" class="nav-site-login">亲，请登录</a></li>
<li class="fl"><a href="javascript:;" class="nav-site-signup link">免费注册</a></li>
<li class="fl"><a href="###" target="_blank" class="nav-site-mobile link">手机逛慕淘</a></li>
</ul>
<ul class="fr">
<li class="fl dropdown menu" data-active="menu">
<a href="###" target="_blank" class="dropdown-toggle link transition">我的慕淘 <i class="dropdown-arrow icon"></i></a>
<ul class="dropdown-layer dropdown-left">
<li><a href="###" target="_blank" class="menu-item">已买到的宝贝</a></li>
<li><a href="###" target="_blank" class="menu-item">我的足迹</a></li>
</ul>
</li>
<li class="fl dropdown menu" data-active="menu">
<a href="###" target="_blank" class="dropdown-toggle link transition">收藏夹 <i class="dropdown-arrow icon"></i></a>
<ul class="dropdown-layer dropdown-left">
<li><a href="###" target="_blank" class="menu-item">收藏的宝贝</a></li>
<li><a href="###" target="_blank" class="menu-item">收藏的店铺</a></li>
</ul>
</li>
<li class="fl">
<a href="###" target="_blank" class="nav-site-category link">商品分类</a>
</li>
<li class="fl dropdown menu" data-active="menu" data-load="json/dropdown-seller.json">
<a href="###" target="_blank" class="dropdown-toggle link transition">卖家中心 <i class="dropdown-arrow icon"></i></a>
<ul class="dropdown-layer dropdown-left">
<li class="dropdown-loading"></li>
<!-- <li><a href="###" target="_blank" class="menu-item">免费开店</a></li>-->
<!-- <li><a href="###" target="_blank" class="menu-item">已卖出的宝贝</a></li>-->
<!-- <li><a href="###" target="_blank" class="menu-item">出售中的宝贝</a></li>-->
<!-- <li><a href="###" target="_blank" class="menu-item">卖家服务市场</a></li>-->
<!-- <li><a href="###" target="_blank" class="menu-item">卖家培训中心</a></li>-->
<!-- <li><a href="###" target="_blank" class="menu-item">体验中心</a></li>-->
</ul>
</li>
<li class="nav-site-service fl dropdown menu" data-active="menu">
<a href="###" target="_blank" class="dropdown-toggle link transition">联系客服 <i class="dropdown-arrow icon"></i></a>
<ul class="dropdown-layer dropdown-right">
<li><a href="###" target="_blank" class="menu-item">消费者客服</a></li>
<li><a href="###" target="_blank" class="menu-item">卖家客服</a></li>
</ul>
</li>
</ul>
</div>
</div>
<!--头部搜索-->
<div class="header">
<div class="container">
<h1 class="fl"><a href="./index.html" class="header-logo text-hidden">慕淘网</a></h1>
<div class="search fl" id="header-search">
<form action="https://s.taobao.com/search" class="search-form">
<input type="text" class="search-inputbox fl" name="q" placeholder="请输入要搜索的词" autocomplete="off">
<input type="submit" class="search-btn fl">
</form>
<ul class="search-layer">
<!-- <li class="search-layer-item text-ellipsis">123</li>-->
<!-- <li class="search-layer-item text-ellipsis">333</li>-->
<!-- <li class="search-layer-item text-ellipsis">333</li>-->
</ul>
</div>
<div class="cart fr dropdown" data-active="cart" data-load="json/cart.json">
<a href="###" target="_blank" class="dropdown-toggle link transition">
<i class="dropdown-cart icon"></i>
购物车
<span class="cart-line">|</span>
<span class="cart-count-total">0</span>
<i class="dropdown-arrow icon"></i>
</a>
<div class="dropdown-layer dropdown-right">
<div class="dropdown-loading"></div>
</div>
</div>
</div>
</div>
</body>
<!--<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>-->
<script>
window.jQuery || document.write('<script src="plug/jQ/jQuery3.5.1.js"><\/script>');
</script>
<!--<script src='plug/jQ/jQuery3.5.1.js'></script>-->
<script src="js/transition.js"></script><!--此文件须早于引用文件引入-->
<script src="js/showHide.js"></script><!--此文件须早于引用文件引入-->
<script src="js/dropdown.js"></script><!--此文件须早于引用文件引入-->
<script src="js/search.js"></script>
<script src="js/index.js"></script>
</html>
base
/*css reset*/
/*清除内外边距*/
body, h1, h2, h3, h4, h5, h6, p, hr, /*结构元素*/
ul, ol, li, dl, dt, dd, /*列表元素*/
form, fieldset, legend, input, button, select, textarea, /*表单元素*/
th, td, /*表格元素*/
pre{
padding: 0;
margin: 0;
}
html,body{
width: 100%;
height: 100%;
}
/*重置默认样式*/
body, button, input, select, textarea {
/*font: 12px/1 微软雅黑, Tahoma, Helvetica, Arial, 宋体, sans-serif;*/
color: #333;
font: 12px/1 "Microsoft YaHei", Tahoma, Helvetica, Arial, SimSun, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-weight: normal;
}
em, i {
font-style: normal;
}
a {
text-decoration: none;
}
li {
list-style-type: none;
vertical-align: top;
}
img {
border: none;
/*display: block;*/
vertical-align: top;
}
textarea {
overflow: auto;
resize: none;
}
table {
border-spacing: 0;
border-collapse: collapse;
}
input {
border: none;
}
/*常用公共样式*/
.fl {
float: left;
display: inline;
}
.fr {
float: right;
display: inline;
}
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
.cf {
*zoom: 1;
}
3回答
-
好帮手慕言
2020-05-28
同学你好，把bottom设置的小些，可能过渡会好一些，同学可以测试下。
就算是不修改的话，这边测试也不是很大的问题。可以不用太纠结这里呦，祝学习愉快~
0 -
vivi_li
提问者
2020-05-28
不是这个问题，是鼠标滑上去，下面那个伪元素的过渡特别生硬，不太同步，会明显的看到有一块空白
0 -
好帮手慕言
2020-05-28
同学你好，可以调整bottom值再测试下。例如：
整体效果会好些。如果我的回答帮到了你，欢迎采纳，祝学习愉快~
0h020-05-28
相似问题