悬停元素时，影响：before伪元素

Question

当我将鼠标悬停在主元素上时，如何影响：before伪元素？

当我将鼠标悬停在主要元素上时，我希望伪元素获得高度值。

我的代码是这样的：

HTML

<div class="object"></div>

CSS

.object:hover object:before {
  height: 30px;
}

Answer 1

要设置悬停的.object:before:hover {}伪样式的样式，您需要设置结合两个状态（例如.object:before { content: " "; width: 30px; background-color: red; display: inline-block; } .object:hover:before { height: 30px; }）的css。

我已附上显示该示例的示例。

<div class="object">
Hover Before Example
</div>

{{1}}

Answer 2

必须为object:hover:before示例：

.object {
  width: 50px;
  height: 50px;
  background: blue;
}

.object:before {
  content: "HOVER";
  background: green;
  height: 3px;
}

.object:hover:before {
  display: block;
  height: 100px;
  background: red;
}

<div class="object"></div>