Question

考虑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，但无济于事。这是怎么回事？

Answer 1

如下调整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?

当不透明度设置为1时，伪元素隐藏内容

1 个答案: