悬停div，更改：在另一个div的伪之后答案

【问题标题】：Hover div, change :after pseudo of another div悬停div，更改：在另一个div的伪之后
【发布时间】：2016-03-23 15:48:19
【问题描述】：

当鼠标悬停在另一个 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 的解决方案会很好。

【问题讨论】：

标签： jquery html css pseudo-element

【解决方案1】：

你的选择器很好，你只需要定义内容：

.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>

【讨论】：

【解决方案2】：

您需要先定义: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 以更改您需要的任何属性。

【讨论】：