jQuery中mouseenter/leave结合li:nth-child():before无法生效求助

嘿，这个问题我之前也踩过坑，咱们来好好唠唠～

首先得搞清楚核心原因：CSS伪元素（像:before、:after这类）根本不是DOM树里的真实节点，它们是浏览器根据CSS规则渲染出来的“虚拟元素”。而jQuery的选择器是基于真实DOM元素来工作的，所以它没法直接选中这些伪元素。你说原生JS能支持，其实准确来说原生JS也不是“选中”伪元素，而是通过window.getComputedStyle()方法来读取伪元素的样式属性，本质上还是绕开了DOM节点的直接操作。

你提到去掉:before后功能正常，那是因为此时你选中的是真实存在的<li>元素，jQuery自然能正常对它进行操作啦。

那现在有没有简洁的方法实现你要的效果？答案是：通过控制类名来切换伪元素的显示状态，这也是目前最优雅可靠的方案，比早年的临时workaround好用太多。具体怎么做呢？

步骤1：用CSS类来控制伪元素的显示 #

先在CSS里定义好默认状态和激活状态的伪元素样式：

/* 默认隐藏伪元素 */
li:nth-child(2):before {
  content: "你的content文本";
  display: none;
  /* 其他样式按需添加 */
}

/* 添加类后显示伪元素 */
li:nth-child(2).show-pseudo:before {
  display: block; /* 或者你需要的display值，比如inline-block */
}

步骤2：用jQuery操作类名来切换状态 #

然后把你的jQuery代码改成给真实的<li>元素添加/移除类：

$(document).ready(function() {
  $("div").mouseenter(function() {
    $("li:nth-child(2)").addClass("show-pseudo");
  });
  $("div").mouseleave(function() {
    $("li:nth-child(2)").removeClass("show-pseudo");
  });
});

如果你确实需要读取伪元素的样式（比如获取content内容），可以结合jQuery和原生JS的方法，比如：

// 获取第一个匹配的li元素的:before伪元素样式
var beforeStyle = window.getComputedStyle($("li:nth-child(2)")[0], ':before');
console.log(beforeStyle.content); // 输出伪元素的content内容

但要注意，伪元素的样式只能通过CSS修改，没法直接通过JS去修改伪元素的属性，所以类名切换依然是修改伪元素显示状态的最优解。

总结一下：直到现在，jQuery依然没法直接选中伪元素（因为它们不是真实DOM节点），但通过类名控制CSS的方式，完全可以简洁地实现你要的鼠标悬停显示伪元素的效果～

内容的提问来源于stack exchange，提问作者Rak Arthus