悬停 div，更改 :after pseudo of another div

Question

悬停在另一个 div 上时是否可以更改 div 的伪元素 :after？它看起来像这样：

.div2:after {
  width: 34px;
  height: 2px;
  padding-top: 10px;
  display: block;
  margin: 0 auto;
  content: "";
  background-color: red;
  background-clip: content-box;
}
.div:hover + .div2:after {
  background-color: blue;
}

<div class="div">hover here</div>
<div class="div2">...</div>

我知道我可以用 Js 添加样式，但是 CSS 唯一的解决方案会很好。

Answer 1

你需要先定义:after伪元素并给它一些内容，然后你就可以使用你定义的选择器来修改那个伪元素的属性。试试这个：

.div2:after {
  content: 'FOO';
  padding-left: 20px;
}
.div:hover + .div2:after {
  color: red;
}

<div class="div">Hover me!</div>
<div class="div2">My :after content changes colour!</div>

您可以修改 :hover 状态 CSS 以更改您需要的任何属性。

Answer 2

你的选择器没问题，你只需要定义内容：

.div:hover + .div2:after {
  content: 'hovering!'
}

<div class="div">...</div>
<div class="div2">...</div>

或者包含悬停和非悬停内容的示例：

.div2:after {
  content: 'not hovering'
}
.div:hover + .div2:after {
  content: 'hovering!'
}

<div class="div">...</div>
<div class="div2">...</div>

悬停 div，更改 :after pseudo of another div

Hover div, change :after pseudo of another div

html

css

jquery

pseudo-element