如何在 Chrome 开发工具中设置元素的：悬停状态并编辑孩子的样式答案

【问题标题】：How to set element's :hover state in Chrome dev tools and edit child's style如何在 Chrome 开发工具中设置元素的：悬停状态并编辑孩子的样式
【发布时间】：2012-09-05 16:50:58
【问题描述】：

假设我们有这种风格：

.parent .child { ... }

.parent:hover .child { ... }

两个选择器都为子元素设置样式。

我想要编辑第二种样式。

我点击.parent并在Chrome开发者工具中设置:hover状态
单击.child 元素以获取儿童风格，但是...

当我点击.child 时，父级上的悬停消失了（因为它现在设置在.child 上）。

^{虽然这在 Firebug 中有效，但我在 Chrome 中需要它...}

铬 21.0.1180.89 米

【问题讨论】：

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

【解决方案1】：

当您打开开发工具并查看标题栏右侧显示Styles 的样式窗格时，会出现一个加号按钮，您可以在其中添加自定义检查器样式表规则。这可能就是您想要的。

【讨论】：

【解决方案2】：

更新：Chrome 现在有以下新热点：

右键单击子元素并选择检查元素
- Chrome 将打开元素视图并选择项目
在元素视图中，右键单击父元素并选择“强制元素状态 ▶ :hover”
再次在元素视图中选择子元素。

以下是旧的、有效但令人讨厌的技术：

用this JSFiddle测试：

悬停子元素本身（也悬停在父元素上）。
右键单击孩子。
使用键盘（不是鼠标）将上下文菜单选择向下移动到“检查元素”并按 Enter
- Hurrah，悬停的父级和选定子级的 CSS 规则可用
编辑规则。 （您可以移动鼠标来执行此操作；该项目将被取消悬停，但其中带有 :hover 的 CSS 规则不会消失。）
将鼠标悬停在元素上以查看更改的规则生效。

请注意，如果您在第 3 步中做错了（如果您使用鼠标），则必须先选择不同的元素，然后再重试。

【讨论】：

不错的解决方法。我怀疑 Chrome 开发人员是否故意这样做，但它确实以这种方式工作。谢谢！
但是：当您使用键盘选择 Inspect element 时...如果您不允许移动鼠标？
一种方法是确保 Inspect element 菜单选择已显示在开发工具区域中。然后您可以轻松地使用鼠标单击它，然后再使用鼠标，而元素仍保持悬停状态，因为浏览器没有检测到鼠标移出。 :) 但我不知道您在选择 Inspect element 后如何编辑样式？
@RobertKoritnik 选择检查元素后，您可以移动鼠标；即使该项目在页面上未悬停，具有:hover 伪类的 CSS 规则仍然可见并且可以编辑。更改规则后，将鼠标移回页面上的元素上以查看更改的规则生效。
+1 用于解决他们在制作开发工具时不得不忽略的问题。否则我相信不会这么难。

【解决方案3】：

（铬 22）

在Elements 面板中，右键单击.parent 元素并在上下文菜单中选择Force Element State > :hover。瞧。

或者，您可以单击右侧Styles 窗格标题中的“指针在虚线矩形上”按钮，然后选中/取消选中要强制在当前选定元素上的伪类。

现在可以在 DOM 树中的任何元素上强制元素状态，而不仅仅是当前选定的元素。

【讨论】：