如何在伪元素上使用 Chrome 开发工具设置悬停？

Question

我正在调试 Bootstrap Tabs 模块，使用 Tab 模块的应用程序将其所有颜色更改放在 li:hover::before 元素中。 Firefox 不会将 ::before 与 DOM 元素分开，但 Chrome 会。在常规 DOM 元素上，例如 a，我可以右键单击以调出菜单以 select 悬停或单击右侧的图钉以 select 悬停

Picture of menu with image Picture of right side of dev tools

当我在元素 window 中右键单击 ::before 或尝试 select 将鼠标悬停在开发工具 windows 的右侧时，我不能。

有没有办法在伪元素上创建悬停动作？

Answer 1

我不相信 :hover 可以直接应用于伪元素。 Selectors Level 3 specification states:

Only one pseudo-element may appear per selector, and if present it must appear after the sequence of simple selectors that represents the subjects of the selector.

我可能错了，但我相信伪classes（如:hover）是选择器的主题的一部分。这本身意味着在伪元素之后指定伪class是无效的。

这反过来意味着无法将 :hover 样式专门应用于伪元素，但是正如其他人在评论中所述，您可以在它们所属的元素上执行此操作。

*::before:hover {
  /* This markup is INVALID as pseudo-class selectors
   * cannot be placed after pseudo-element selectors.
   */
}

*:hover::before {
  /* This would apply styling to the pseudo-element
   * when the containing element is hovered over.
   */
}

Answer 2

如上面的答案所述，无法直接在伪元素上应用 :hover。但是有一个解决方法，可以使用 jQuery 来实现。 出于测试目的 您可以为 element:hover::before 定义一个单独的 CSS class 添加一个 button 并将 class 应用到点击按钮上的元素。

HTML:

<p>This is a sample paragraph.</p>
<input type="button" id="btnFoo" value="Apply Hover On Before"/>

CSS:

p:before{
  content: 'B4';
}
p.foo::before{
  color: red;
}

JS:

$("#btnFoo").click(function () {
    $("p").toggleClass("bar");
});

DEMO