css - 使用::在按钮悬停效果不可见的选择器之后

Question

我想创建一种效果，当鼠标悬停在按钮上时，较大的按钮会快速出现然后消失。我希望 .btn::after 会立即可见，但现在它是不可见的。我现在的目标只是让 .btn::after 可见。

html

 <header class="header">
   <div class="header__logo-box">
     <img src="https://dtgxwmigmg3gc.cloudfront.net/imagery/assets/derivations/icon/256/256/true/eyJpZCI6ImE4OWEzMGU2YTg5NTViYjcxZWY1OTJiNDlkYjZjMTRhLmpwZyIsInN0b3JhZ2UiOiJwdWJsaWNfc3RvcmUifQ?signature=8735e0713b1bd34828e75056d2c51efc7ffc62c0167dcb80e7d66fe8550b9bc6" alt="Logo" class="header__logo">
   </div>

   <div class="header__text-box">
     <h1 class="heading-primary">
       <span class="heading-primary--main">Outdoors</span>
       <span class="heading-primary--sub">is where life happens</span>
     </h1>

     <a href="#section-tours" class="btn btn--white btn--animated">Discover our tours</a>
   </div>
</header>

与 .btn 相关的 CSS:

.btn
{
  padding: 10px 30px;  
  text-decoration: none;
  color: inherit;
  border-radius: 100px;
  position: relative;
}

.btn--white
{
  background-color: #fff;
}

/* this has no effect */
.btn::after
{
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;  
  transition: all .4s;
}

/* this has no effect */
.btn:hover::after
{
  transform: scaleX(1.4) scaleY(1.6);
  opacity: 0;
}

jsfiddle 在这里:https://jsfiddle.net/ybo6xgsf/3/

可能错误在 CSS 的其他部分，所以请查看 jsfiddle 链接。

Answer 1

尝试添加

background: white;
z-index: -1;

到你的.btn::after，我看到了效果。

.header
{
  background-image: url(https://images2.minutemediacdn.com/image/upload/c_crop,h_2450,w_4368,x_0,y_165/f_auto,q_auto,w_1100/v1562080363/shape/mentalfloss/29942-gettyimages-155302141.jpg);
  background-blend-mode: multiply;
  height: 80vh;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 70%);
  position: relative;
}

.header::after
{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to bottom right, #34c9eb, #0c4f5e);
  opacity: 0.9;
  z-index: -1;
}

.header__logo-box
{
  position: absolute;
  top: 5px;
  left: 0;  
  width: 80px;
}

.header__logo
{
  width: 100%;
  height: 100%;
}

.header__text-box
{
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.heading-primary--main
{
  display: block;
}

.heading-primary--sub
{
  display: block;  
}

.btn
{
  padding: 10px 30px;  
  text-decoration: none;
  color: inherit;
  border-radius: 100px;
  position: relative;
}

.btn--white
{
  background-color: #fff;
}

/* this has no effect */
.btn::after
{
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;  
  transition: all .4s;
  background: white;
  z-index: -1;
}

/* this has no effect */
.btn:hover::after
{
  transform: scaleX(1.4) scaleY(1.6);
  opacity: 0;
}

<header class="header">
 <div class="header__logo-box">
   <img src="https://dtgxwmigmg3gc.cloudfront.net/imagery/assets/derivations/icon/256/256/true/eyJpZCI6ImE4OWEzMGU2YTg5NTViYjcxZWY1OTJiNDlkYjZjMTRhLmpwZyIsInN0b3JhZ2UiOiJwdWJsaWNfc3RvcmUifQ?signature=8735e0713b1bd34828e75056d2c51efc7ffc62c0167dcb80e7d66fe8550b9bc6" alt="Logo" class="header__logo">
 </div>

 <div class="header__text-box">
   <h1 class="heading-primary">
     <span class="heading-primary--main">Outdoors</span>
     <span class="heading-primary--sub">is where life happens</span>
   </h1>

   <a href="#section-tours" class="btn btn--white btn--animated">Discover our tours</a>
 </div>
</header>