悬停元素时，影响 :before 伪元素 [重复]答案

【问题标题】：When hovering element, affect :before pseudo element [duplicate]悬停元素时，影响 :before 伪元素 [重复]
【发布时间】：2021-01-15 11:18:52
【问题描述】：

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

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

我的代码是这样的：

HTML

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

CSS

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

【问题讨论】：

标签： html css pseudo-element

【解决方案1】：

要设置悬停的before 伪样式，您需要设置结合.object:before:hover {} 等两种状态的css。

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

.object:before {
  content: " ";
  width: 30px;
  background-color: red;
  display: inline-block;
}

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

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

【讨论】：

【解决方案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;
}

&lt;div class="object"&gt;&lt;/div&gt;

【讨论】：