为啥它不工作。过渡属性？ [复制]
Posted
技术标签:
【中文标题】为啥它不工作。过渡属性？ [复制]【英文标题】：why isn't it working. transition property? [duplicate]为什么它不工作。过渡属性？ [复制] 【发布时间】：2020-12-12 17:32:06 【问题描述】：首先。很抱歉缺乏英语语法技能。
我尝试克隆编码韩国公司网站之一。
但是，不工作。伪元素的过渡属性。
有问题的css行号是“51”。在header .gnb ul li a span:hover:after
/* Skip css reset and import img file */
/* index.css */
header
width: 100%;
height: 80px;
text-align: center;
header h1
position: absolute;
left: 50px;
top: 0;
header h1 a
display: block;
width: 110px;
height: 50px;
position: absolute;
top: 15px;
background: url("../img/sp_com.png") no-repeat -300px 0;
color: transparent;
header .gnb ul li
display: inline-block;
header .gnb ul li a
display: block;
height: 80px;
padding: 0 35px;
font-size: 17px;
line-height: 80px;
header .gnb ul li a span
position: relative;
header .gnb ul li a span:hover:after
content: "";
display: block;
position: absolute;
left: 0;
bottom: -10px;
width: 100%;
height: 1px;
background-color: #336584;
**transition: all 1s ease;**
header .spot
position: absolute;
right: 50px;
top: 0;
header .spot ul li
float: left;
line-height: 80px;
header .spot ul li a
display: block;
position: relative;
height: 80px;
padding: 0 10px;
line-height: 80px;
header .spot ul li:last-child a
padding-right: 0;
header .spot ul li:before
content:"";
display: block;
position: absolute;
top: 50%;
width: 1px;
height: 7px;
background-color: #ccc;
transform: translateY(-50%)
header .spot ul li:first-child:before
content: "";
display: none;
header .gnb ul li a:hover
font-weight: blod !important;
color:#336584;
header .spot ul li a:hover
font-weight: bold !important;
color:#336584;
text-decoration: underline;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../css/default.css">
<link rel="stylesheet" href="../css/index.css">
<title>Document</title>
</head>
<body>
<header>
<h1><a href="#">한솔홈데코</a></h1>
<h2 class="hide">대메뉴</h2>
<nav class="gnb">
<ul>
<li><a href="#1"><span>제품정보</span></a></li>
<li><a href="#2"><span>시공사례</span></a></li>
<li><a href="#3"><span>고객센터</span></a></li>
<li><a href="#4"><span>기업소개</span></a></li>
<li><a href="#5"><span>사업분야</span></a></li>
</ul>
</nav>
<h2 class="hide">관련서비스</h2>
<nav class="spot">
<ul>
<li><a href="#6">제품찾기</a></li>
<li><a href="#7">SITEMAP</a></li>
<li><a href="#8">BLOG</a></li>
<li><a href="#9">YOUTUBE</a></li>
</ul>
</nav>
</header>
</body>
</html>【问题讨论】：
【参考方案1】：在spna:after中添加transition属性，实现悬停时的过渡效果
尝试使用此代码：
header .gnb ul li a span:after
content: "";
transition: all 0.4s ease;
/* Skip css reset and import img file */
/* index.css */
header
width: 100%;
height: 80px;
text-align: center;
header h1
position: absolute;
left: 50px;
top: 0;
header h1 a
display: block;
width: 110px;
height: 50px;
position: absolute;
top: 15px;
background: url("../img/sp_com.png") no-repeat -300px 0;
color: transparent;
header .gnb ul li
display: inline-block;
header .gnb ul li a
display: block;
height: 80px;
padding: 0 35px;
font-size: 17px;
line-height: 80px;
header .gnb ul li a span
position: relative;
header .gnb ul li a span:after
content: "";
transition: all 0.4s ease;
header .gnb ul li a span:hover:after
display: block;
position: absolute;
left: 0;
bottom: -10px;
width: 100%;
height: 1px;
background-color: #336584;
header .spot
position: absolute;
right: 50px;
top: 0;
header .spot ul li
float: left;
line-height: 80px;
header .spot ul li a
display: block;
position: relative;
height: 80px;
padding: 0 10px;
line-height: 80px;
header .spot ul li:last-child a
padding-right: 0;
header .spot ul li:before
content:"";
display: block;
position: absolute;
top: 50%;
width: 1px;
height: 7px;
background-color: #ccc;
transform: translateY(-50%)
header .spot ul li:first-child:before
content: "";
display: none;
header .gnb ul li a:hover
font-weight: blod !important;
color:#336584;
header .spot ul li a:hover
font-weight: bold !important;
color:#336584;
text-decoration: underline;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../css/default.css">
<link rel="stylesheet" href="../css/index.css">
<title>Document</title>
</head>
<body>
<header>
<h1><a href="#">한솔홈데코</a></h1>
<h2 class="hide">대메뉴</h2>
<nav class="gnb">
<ul>
<li><a href="#1"><span>제품정보</span></a></li>
<li><a href="#2"><span>시공사례</span></a></li>
<li><a href="#3"><span>고객센터</span></a></li>
<li><a href="#4"><span>기업소개</span></a></li>
<li><a href="#5"><span>사업분야</span></a></li>
</ul>
</nav>
<h2 class="hide">관련서비스</h2>
<nav class="spot">
<ul>
<li><a href="#6">제품찾기</a></li>
<li><a href="#7">SITEMAP</a></li>
<li><a href="#8">BLOG</a></li>
<li><a href="#9">YOUTUBE</a></li>
</ul>
</nav>
</header>
</body>
</html>【讨论】：
【参考方案2】：将您的 transition 属性从 header .gnb ul li a span:hover:after 转移到 header .gnb ul li a
header .gnb ul li a
display: block;
height: 80px;
padding: 0 35px;
font-size: 17px;
line-height: 80px;
transition: all 1s ease;
【讨论】：
以上是关于为啥它不工作。过渡属性？ [复制]的主要内容，如果未能解决你的问题，请参考以下文章