css悬停在元素上而不影响：after

sczxawaw 于 2023-01-18 发布在其他

关注(0)|答案(1)|浏览(155)

如何阻止伪元素受父元素悬停的影响？

.list-item {
  position: absolute;
  background: black;
  color: white;
  padding: 10px 20px;
  transition: all 250ms ease-in-out;
}

.list-item:hover {
  transform: scale(1.5);
}

.list-item:after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  background: orange;
  z-index: 10;
  border-radius: 100%;
}

<div class="list-item">
  test
</div>

悬停时，它将所有悬停效果应用于：after伪元素

css

来源：https://stackoverflow.com/questions/75129896/css-hover-an-element-without-affecting-after

1条答案

按热度按时间

b09cbbtk1#

一种方法可以是对::after伪元素应用相反的过渡：

.list-item:hover {
    transform: scale(1.5);
}

.list-item:hover::after {
    /* transform: scale(calc(1 - (your main scale amount - 1) / 2)); */
    transform: scale(0.75);
}

赞(0）回复(0）举报 2023-01-18

我来回答

css悬停在元素上而不影响：after

1条答案

相关问题

热门标签

最新问答