html - CSS z-index 仅适用于阴影

Question

我试图用一个 div(红色的)重叠在我的圆形按钮的悬停过渡期间创建的阴影，这样脉冲效果就不会显示在我的 div 上，而是显示在其他地方。
这是我的代码:

body {
  background: #292f33;
  text-align: center;
  color: #FFF;
  font-family: sans-serif;
}
.btntest {
  width: 190px;
  padding: 4px;
  border-radius: 5px;
  background: red;
  color: white;
  z-index: 299;
  position: fixed;
}
.button {
  position: fixed;
  z-index: 300;
  left: 10px;
  display: inline-block;
  height: 60px;
  width: 60px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 1);
}
.button:hover {
  animation: pulse 1.1s ease-out;
  animation-iteration-count: infinite;
}
@keyframes pulse {
  0% {
    z-index: 298;
    box-shadow: 0 0 0 0 rgba(85, 172, 238, 0);
  }
  25% {
    z-index: 298;
    box-shadow: 0 0 0 2px rgba(85, 172, 238, .4);
  }
  49.9% {
    z-index: 298;
    box-shadow: 0 0 0 5px rgba(85, 172, 238, 0);
  }
  50% {
    z-index: 298;
    box-shadow: 0 0 0 0 rgba(85, 172, 238, 0);
  }
  75% {
    z-index: 298;
    box-shadow: 0 0 0 20px rgba(85, 172, 238, .6);
  }
  99.9% {
    z-index: 298;
    box-shadow: 0 0 0 7px rgba(85, 172, 238, 0);
  }
  100% {
    z-index: 298;
    box-shadow: 0 0 0 0 rgba(85, 172, 238, 0);
  }
}
@-webkit-keyframes pulse {
  0% {
    z-index: 298;
    box-shadow: 0 0 0 0 rgba(85, 172, 238, 0);
  }
  25% {
    z-index: 298;
    box-shadow: 0 0 0 2px rgba(85, 172, 238, .4);
  }
  49.9% {
    z-index: 298;
    box-shadow: 0 0 0 5px rgba(85, 172, 238, 0);
  }
  50% {
    z-index: 298;
    box-shadow: 0 0 0 0 rgba(85, 172, 238, 0);
  }
  75% {
    z-index: 298;
    box-shadow: 0 0 0 20px rgba(85, 172, 238, .6);
  }
  99.9% {
    z-index: 298;
    box-shadow: 0 0 0 7px rgba(85, 172, 238, 0);
  }
  100% {
    z-index: 298;
    box-shadow: 0 0 0 0 rgba(85, 172, 238, 0);
  }
}

<p>Pulse Effect</p>
<a class="button"></a>
<div class="btntest">Test</div>

我已经为过渡阴影提供了 z-index 属性，但每次悬停时，按钮也会隐藏在 div 下方 - 我只想隐藏阴影。我怎样才能做到这一点？

Answer 1

正如@connexo 所说，元素的阴影始终位于其元素的同一 z-index 级别。
一个可能的解决方法是创建另一个隐藏元素，它会站在较低的层上，在您悬停在真实按钮上时动画:

body {
  background: #292f33;
  text-align: center;
  color: #FFF;
  font-family: sans-serif;
}
.btntest {
  width: 190px;
  padding: 4px;
  border-radius: 5px;
  background: red;
  color: white;
  z-index: 299;
  position: fixed;
}
.button {
  position: fixed;
  z-index: 300;
  left: 10px;
  display: inline-block;
  height: 60px;
  width: 60px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 1);
}
.fake-btn {
  position: fixed;
  z-index: 298;
  left: 10px;
  display: inline-block;
  height: 60px;
  width: 60px;
  border-radius: 50%;
  margin: 0;
  background: rgba(255, 255, 255, 0);
}
.button:hover + .fake-btn {
  animation: pulse 1.1s ease-out;
  animation-iteration-count: infinite;
}
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(85, 172, 238, 0);
  }
  25% {
    box-shadow: 0 0 0 2px rgba(85, 172, 238, .4);
  }
  49.9% {
    box-shadow: 0 0 0 5px rgba(85, 172, 238, 0);
  }
  50% {
    box-shadow: 0 0 0 0 rgba(85, 172, 238, 0);
  }
  75% {
    box-shadow: 0 0 0 20px rgba(85, 172, 238, .6);
  }
  99.9% {
    box-shadow: 0 0 0 7px rgba(85, 172, 238, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(85, 172, 238, 0);
  }
}
@-webkit-keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(85, 172, 238, 0);
  }
  25% {
    box-shadow: 0 0 0 2px rgba(85, 172, 238, .4);
  }
  49.9% {
    box-shadow: 0 0 0 5px rgba(85, 172, 238, 0);
  }
  50% {
    box-shadow: 0 0 0 0 rgba(85, 172, 238, 0);
  }
  75% {
    box-shadow: 0 0 0 20px rgba(85, 172, 238, .6);
  }
  99.9% {
    box-shadow: 0 0 0 7px rgba(85, 172, 238, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(85, 172, 238, 0);
  }
}

<p>Pulse Effect</p>

<a class="button"></a>
<p class="fake-btn"></p>
<div class="btntest">Test</div>