时间戳

首页 > 解决方案 > 如何仅在创建后将规则应用于子元素（CSS）？

html - 如何仅在创建后将规则应用于子元素（CSS）？

问题描述

好的，所以我的问题是按钮正常工作，除了整个文档是父文档，直到我悬停，所以一切都会变成灰色。我该如何解决这个问题？

这是一个链接，可以查看闪烁的灰色框的问题。 https://jsfiddle.net/w0rec4gs/

.btn-2 {
  cursor: pointer;
  padding: 10px;
  background: #000;
  color: #fff;
  border-radius: 30px;
  transition: all .25s ease;
}

.btn-2:hover {
  transform: translate(-12px, -12px);
}

.btn-2:hover:after {
  transform: translate(6px, 6px);
}

.btn-2:hover:before {
  transform: translate(12px, 12px);
}

.btn-2::after,.btn-2::before {
  content: "";
  position: absolute;
  opacity: .3;
  background: #000;
  border-radius: inherit;
  width: 100%;
  height: 100%;
  left: 0;
  bottom: 0;
  z-index: -1;
  transition: all .25s ease;
}
<button class="btn-2">Button 2</button>

标签： htmlcssbutton

解决方案

为了确保不会发生这种情况，只需添加相对于按钮的位置。绝对定位的元素（你的之后和之前）相对于你的元素定位自己，而不是它们的直接父元素，即身体

.btn-2 {
  cursor: pointer;
  position: relative;
  padding: 10px;
  background: #000;
  color: #fff;
  border-radius: 30px;
  transition: all .25s ease;
}

推荐阅读