悬停效果插件 Class 仅使用 CSS

Question

我正在尝试仅使用 CSS 创建可重复使用的悬停效果 class。我知道如果愿意使用 JS 或其他标记，可以通过多种方式实现这种效果，但这不是我的意图。

我的问题的核心是，我发现似乎不能在伪元素上使用伪选择器。这令人沮丧，因为我相信有了上述功能，下面的代码片段就足够了。



.btn-hover-effect {
  position: relative;
}

.btn-hover-effect::before {
  content: "";
  background-color: rgba(0, 0, 0, 0);
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.btn-hover-effect::before:hover {
  background-color: rgba(0, 0, 0, 0.5);
}

Answer 1

悬停效果适用于 .btn-hover-effect 按钮，因此您应该先 link 它。

.btn-hover-effect:hover::before

您所做的事情是在悬停之前针对伪元素，这是行不通的。

这是一个有效的测试片段：

.btn-hover-effect {
  position: relative;
}

.btn-hover-effect::before {
  content: "";
  background-color: rgba(0, 0, 0, 0);
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: background-color 0.1s ease-in;
}

.btn-hover-effect:hover::before {
  background-color: rgba(0, 0, 0, 0.5);
}

<button class="btn-hover-effect">Hello World</button>

悬停效果插件 Class 仅使用 CSS

Hover Effect Addon Class Using CSS Only

html

css

styling