[英]transition-delay for pseudo-element
如您在下面的代码中所见,我在菜单项after
使用了伪元素来获得三角形形状。
但是三角形根本不响应过渡。
任何想法?
(我是CSS和此站点的新手,所以如果您在这里发现任何错误,请原谅我。)
(对于实时预览,您可以在此问题的底部找到它。)
HTML:
<ul class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Vehicles</a></li>
<li><a href="#">Vans</a></li>
<li><a href="#">Camper Vans</a></li>
</ul>
CSS:
.breadcrumb {
list-style: none;
overflow: hidden;
font: 18px Helvetica, Arial, Sans-Serif;
}
.breadcrumb li {
float: left;
}
.breadcrumb li a {
color: white;
text-decoration: none;
padding: 10px 0 10px 65px;
background: brown; /* fallback color */
background: hsla(34,85%,35%,1);
position: relative;
display: block;
float: left;
}
.breadcrumb li a:after {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent; /* Go big on the size, and let overflow hide */
border-bottom: 50px solid transparent;
border-left: 30px solid hsla(34,85%,35%,1);
position: absolute;
top: 50%;
margin-top: -50px;
left: 100%;
z-index: 2;
}
.breadcrumb li:first-child a {
padding-left: 10px;
}
.breadcrumb li:nth-child(2) a { background: hsla(34,85%,45%,1); }
.breadcrumb li:nth-child(2) a:after { border-left-color: hsla(34,85%,45%,1); }
.breadcrumb li:nth-child(3) a { background: hsla(34,85%,55%,1); }
.breadcrumb li:nth-child(3) a:after { border-left-color: hsla(34,85%,55%,1); }
.breadcrumb li:nth-child(4) a { background: hsla(34,85%,65%,1); }
.breadcrumb li:nth-child(4) a:after { border-left-color: hsla(34,85%,65%,1); }
.breadcrumb li:nth-child(5) a { background: hsla(34,85%,75%,1); }
.breadcrumb li:nth-child(5) a:after { border-left-color: hsla(34,85%,75%,1); }
.breadcrumb li a:hover { background: hsla(34,85%,25%,1); transition-delay:.3s; }
.breadcrumb li a:hover:after { border-left-color: hsla(34,85%,25%,1) !important; transition: border-color 0.3s ; }
积分:此菜单取自css-tricks.com上的课程,并进行了一些编辑。
您的CSS中有错别字,还有不正确的属性
这个
.breadcrumb li a:hover:after {
border-left-color: hsla(34, 85%, 25%, 1) !important;
transition: borded-color 0.3s;
}
应该是这个
.breadcrumb li a:hover:after {
border-left-color: hsla(34, 85%, 25%, 1) !important;
transition-delay: 0.3s;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.