Javascript 通过悬停子项更改父项上的样式：之后

假设我有这个清单

<ul class="parent">
    ::before
    <li class="child"></li>
    <li class="anotherchild"></li>
    ::after
</ul>

似乎不起作用

.parent:hover:after{}

工作，但这不是我希望实现的

---

在阅读了几篇文章之后，在js中更改psuedo元素样式似乎很棘手，我不确定是否可以通过悬停child来更改parent（？）

您不能使用纯css，但可以使用javascript或jQuery

下面是使用jquery完成的一个演示：

$(document).ready(function() {
  $(".child").mouseenter(function() {
    $(this).parent().addClass("childHovered");
  }).mouseleave(function() {
    $(this).parent().removeClass("childHovered");
  })
})

如果要更改

：在

psuedo元素之后，则可以将psuedo效果添加到其他类，如下面的示例，其中我更改了文本颜色

演示

$（文档）.ready（函数（）{
$（“.child”）.mouseenter（函数（）{
$（this.parent（）.addClass（“childHovered”）；
}).mouseleave（函数（）{
$（this.parent（）.removeClass（“childHovered”）；
})
})

.parent.child已悬停{
颜色：蓝色；
}
.parent.childHovered:：after{
内容：“；
高度：20px；
宽度：20px；
背景色：#000；
位置：绝对位置；
}

孩子
另一个孩子

Javascript解决方案

---

向样式表添加规则

const child=document.querySelector（“.child”）；
child.addEventListener（“mouseenter”，（）=>{
const parent=child.parentElement；
document.styleSheets[0].addRule（'div.parent:after'，'content:'Hovering'）；
})
child.addEventListener（“mouseleave”，（）=>{
const parent=child.parentElement；
document.styleSheets[0].addRule（'div.parent:after'，'content:'Not hover'）；
})

.parent:：after{
内容：“不悬停”；
}

小孩

在纯css中悬停子元素时，不能更改父元素。只有另一种方法。在这里，我想更改悬停child时的parents:after psuedo元素。它是否也适用于此？@Thomas请检查这是否解决了您的问题，如果您有任何问题，请告诉我。这对我来说不起作用。似乎在我接受Carsten的答案后，您在您的答案中添加了相同的解决方案（第二个解决方案）。Carsten的解决方案在jQuery中。我在我的问题中问，这在CSS、jQuery或vanilla JS中是否可行，所以jQuery是完全可以的。你真的因为我不接受你的回答而投了反对票吗？@Thomas我没有投反对票，伙计！答案的多样性很好，这样，如果将来有人访问此帖子，他/她可能会看到不同的可能解决方案。我的第一个解决方案完全不同于Carstens的“完美”。简单整洁solution@Thomas没问题，乐于助人忘记添加：为此，我坚持使用Jquery 1.11，所以我不得不稍微修改您的代码，并使用$（document）。在（'mouseenter'，'.child'，函数（）{}上使用。@Thomas Yer，不知道这一点，但是+1用于将其添加到注释中，以便其他人也可以使用该信息

$(document).ready(function() {
  $(".child").mouseenter(function() {
    $(this).parent().addClass("childHovered");
  }).mouseleave(function() {
    $(this).parent().removeClass("childHovered");
  })
})