不能得到:转换到工作
问题描述:
我似乎无法得到不透明转换工作在:伪元素之后,但在:before元素上的相同转换完全正常工作。任何帮助表示赞赏!不能得到:转换到工作
.top-nav li a:hover:after {
content: "/";
display: inline-block;
opacity: 1;
transition: opacity 0.2s;
margin-left: 10px;
}
.top-nav li a:after {
content: "/";
display: inline-block;
opacity: 0;
transition: opacity 0.2s;
margin-left: 10px;
position: absolute;
}
.top-nav li a:hover:before {
content: "/";
display: inline-block;
opacity: 1;
transition: opacity 0.2s;
margin-right: 10px;
}
.top-nav li a:before {
content: "/";
display: inline-block;
opacity: 0;
transition: opacity 0.2s;
margin-right: 10px;
}
答
它的工作尽量给宽度李然后它会显示
.top-nav li a:hover:after {
content: "/";
display: inline-block;
opacity: 1;
transition: opacity 2s;
margin-left: 10px;
}
.top-nav li a:after {
content: "/";
display: inline-block;
opacity: 0;
transition: opacity 0.2s;
margin-left: 10px;
position: absolute;
}
.top-nav li a:hover:before {
content: "/";
display: inline-block;
opacity: 1;
transition: opacity 0.2s;
margin-right: 10px;
}
.top-nav li a:before {
content: "/";
display: inline-block;
opacity: 0;
transition: opacity 0.2s;
margin-right: 10px;
}
.top-nav {
list-style: none;
}
.top-nav li {
float: left;
position: relative;
background:white;
width:85px;
text-align:center;
}
<ul class="top-nav">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
在我的测试使用CSS都:之前和:转换工作后。必须发挥其他一些因素。一种可能性是相邻的按钮位于较高的z-索引处,并且在内容之后遮蔽:。你能制作一个简化的测试用例来重新创建这个bug吗?看到控制导航布局的CSS和HTML标记会很有帮助。 –
这里是一个小提琴,展示了我在之前的评论中描述的重叠可能性:https://jsfiddle.net/k9euprr4/请注意第三和第四列表项目如何掩盖他们的邻居。在伪内容仍然存在之后,它只是隐藏在相邻按钮后面。 –