Question

我试图将我的圆形按钮悬停过渡期间创建的阴影与div（红色）重叠，以便在我的div上显示pusle效果，但在其他地方不显示。
这是我的代码：

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>

Answer 2

你无法以这种方式工作。元素的阴影将始终堆叠在与具有阴影的元素相同的z-index级别上。

仅用于阴影的CSS z-index

2 个答案: