2

我正在尝试平面按钮设计，并试图在整个班级上放一个动画来放大:hover。添加:after伪元素后，我的基类将在:after动画时消失。我试着穿上伪元素，但它并没有把它带到前面z-index:-1;。:hover:after我已经更改了:after元素的不透明度，以证明它落后了。

如何确保基本元素在顶部？我可以将背景颜色更改为“无”，但如果我需要填充它怎么办？

另外，我如何只引用基本元素？当我这样做时class:hover，它指的是整个对象，包括 the:before和:after伪元素。

HTML：

<div id='wrap'>
  <button class='a'>Test</button>
</div>

CSS：

#wrap{
  position: relative;
  left: 100px;
  top: 100px;
  width: 500px;
}
.a{
  position:relative;
  border-radius: 100%;
  background-color: #ddd;
  height: 100px;
  width: 100px;
  border: none;
  background-color: red;
  color: white;
  transition: all 0.2s;
}

.a:after{
  border-radius: inherit;
  content:'';
  position: absolute;
  z-index:-1;
  height: 112px;
  width: 112px;
  border: 4px red solid;
  top: -10px;
  left: -10px;
  z-index: -1;
  transition: all 0.2s;
  background-color: white;
}
.a:hover{
  transform: scale(1.2,1.2);
}
.a:hover:after{
  opacity: 0.8;
  z-index: -1;
}

演示。

4

0 回答 0