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

【问题标题】：How do you set hover using Chrome Dev Tools on pseudo elements?如何在伪元素上使用 Chrome 开发工具设置悬停？
【发布时间】：2016-06-15 02:34:54
【问题描述】：

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

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

当我在元素窗口中右键单击 ::before 或尝试在开发工具窗口的右侧选择悬停时，我不能。

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

【问题讨论】：

右击parent并选择:hover选项。这也会自动在伪元素上设置悬停。
像这样设置悬停属性：parent:hover::before 或 parent:hover::after
赛义德，完美的答案 - 谢谢。你的第二个答案是不同的方法吗？如果是这样，我该如何设置这些属性？谢谢大家的回答。

标签： css css-selectors hover google-chrome-devtools

【解决方案1】：

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

每个选择器只能出现一个伪元素，如果出现，它必须出现在代表选择器主题的简单选择器序列之后。

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

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

*::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.
   */
}

【讨论】：

【解决方案2】：

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

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

【讨论】：