Javascript 如何选择具有：hover子类的HTMLDOM元素？

CSS

HTML

我需要选择所有元素，它们在CSS中定义了：hover子类。对于本例，它将是和元素

---

可以用JavaScript实现吗？

有一组函数，即所谓的选择器api，以及类似的函数。但是，使用这些函数几乎唯一不能做的事情就是选择伪类，例如：hover

恐怕您必须监视mouseover和mouseleave事件，并将当前悬停的元素存储在单独的变量中。通过使用其父节点属性和其父节点的父节点属性，可以访问父链

我建议这样做：

<div id="content">
    <p>
        <a href="#">Test</a>
    </p>
</div>

---

起初我认为这是不可能的，但经过一番思考后我想到了这个。我使用ES2015语法编写它，因为在非数组上使用forEach这样的东西更容易，但如果需要，也可以使用ES5语法编写

让getElementsWithHoverRule==>{ 让getSelectors=规则=>{ //将所有内容都添加到第一个卷曲括号中 让selectorText=rule.cssText.match/^[^{]+/[0]； //如果规则有多个选择器， //我们将分别对它们进行筛选 //所以我们不捕获共享的元素 //样式，但有不同的选择器 返回selectorText.split'，'； }, 选择器=[]， rxHover=/：悬停/； //循环浏览所有样式表 […document.stylesheet].forEachsheet=>{ //还有那些样式表中的所有规则 让规则=sheet.cssRules | | sheet.rules； 如果规则！==null{ […规则].forEachrule=>{ 让ruleSelectors=getSelectorsrule； 选择器=选择器。concatruleSelectors； }; } }; //查找包含悬停的所有规则 选择器=selectors.filterselector=>rxHover.testselector； //从选择器中删除：悬停，这样我们就可以在没有用户的情况下选择它们 //把鼠标悬停在他们身上 选择器=selectors.mapselector=>selector.replacerxHover， returndocument.querySelectorAllselectors.join'，'； }; 让hoverElement=getElementsWithHoverRule； console.loghover元素； //单击页面时，在匹配的元素周围放置红色框 document.addEventListener'click'，=>{ […hoverElement].forEachel=>el.style.border='5px-f00'； }，假； p:hover{background:eef} span，a:hover{background:000；color:fff；} div{color:000；} .something{color:00f} 内容a:悬停{color:ff0} 非链接文本

另一段

---

你为什么要这么做？你想解决的实际问题是什么？

<div id="content">
    <p>
        <a href="#">Test</a>
    </p>
</div>

var hoveredElement = null;
document.addEventListener( "mouseover", function(e){
    hoveredElement = e.target;
});