考虑一下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
做了一些实验,但都没有用。这是怎么回事?
发布于 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?
https://stackoverflow.com/questions/56325678
复制相似问题