当不透明度设置为1时，伪元素将隐藏内容
当不透明度设置为1时，伪元素将隐藏内容
提问于 2019-05-27 20:00:44
考虑一下HTML
<section id="speak-to-our-experts">
<a class="mega-link mega-link--primary" href="#">
<h2>get in touch</h2>
<span>speak to one of our experts</span>
</a>
</section>
下面的CSS会导致锚元素中的文本出现问题。
#speak-to-our-experts {
.mega-link {
display: block;
padding: 3.5rem 0 4.625rem;
width: 100%;
text-decoration: none;
text-align: center;
transition: background-color .3s;
position: relative;
&.mega-link--primary {
background-color: #ef0d33;
color: $white;
overflow: hidden;
}
&.mega-link--primary:hover:before {
transform: translateX(10%) skew(-20deg);
opacity: 1;
}
&.mega-link--primary:before {
content: "";
position: absolute;
top: 0;
right: 0;
width: 140%;
height: 100%;
transform: translateX(100%);
background-color: #cb0b2b;
opacity: 0;
transition: transform 1.1s ease,opacity .3s ease;
}
}
}
虽然我根据需要从伪元素获得了幻灯片效果-但不透明度会给我带来问题，因为它隐藏了下面的文本。我已经用z-index做了一些实验，但都没有用。这是怎么回事？
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-05-27 20:10:13
如下所示调整z-index。.mega-link中的那一层将创建一个堆叠上下文，以防止伪元素落后，而伪元素上的一层将使其成为该堆叠上下文中的最低层。
.mega-link {
display: block;
padding: 3.5rem 0 4.625rem;
width: 100%;
text-decoration: none;
text-align: center;
transition: background-color .3s;
position: relative;
z-index:0; /*added*/
}
.mega-link--primary {
background-color: #ef0d33;
color: #fff;
overflow: hidden;
}
.mega-link--primary:hover:before {
transform: translateX(10%) skew(-20deg);
opacity: 1;
}
.mega-link--primary:before {
content: "";
position: absolute;
z-index:-1; /*added*/
top: 0;
right: 0;
width: 140%;
height: 100%;
transform: translateX(100%);
background-color: #cb0b2b;
opacity: 0;
transition: transform 1.1s ease, opacity .3s ease;
}<section id="speak-to-our-experts">
<a class="mega-link mega-link--primary" href="#">
<h2>get in touch</h2>
<span>speak to one of our experts</span>
</a>
</section>
相关：Why can't an element with a z-index value cover its child?
另一个想法是通过添加position:relative来确保文本稍后会被绘制，例如：
.mega-link {
display: block;
padding: 3.5rem 0 4.625rem;
width: 100%;
text-decoration: none;
text-align: center;
transition: background-color .3s;
position: relative;
}
.mega-link--primary {
background-color: #ef0d33;
color: #fff;
overflow: hidden;
}
.mega-link--primary:hover:before {
transform: translateX(10%) skew(-20deg);
opacity: 1;
}
.mega-link--primary:before {
content: "";
position: absolute;
top: 0;
right: 0;
width: 140%;
height: 100%;
transform: translateX(100%);
background-color: #cb0b2b;
opacity: 0;
transition: transform 1.1s ease, opacity .3s ease;
}
.mega-link--primary *{
position:relative;
}<section id="speak-to-our-experts">
<a class="mega-link mega-link--primary" href="#">
<h2>get in touch</h2>
<span>speak to one of our experts</span>
</a>
</section>
相关：Why does position:relative; appear to change the z-index?
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56325678
复制相关文章
相似问题