Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

我知道我可以用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，改变：在另一个div的伪之后

2 个答案: