如何在 Chrome 开发工具中设置元素的:悬停状态并编辑孩子的样式 [英] How to set element's :hover state in Chrome dev tools and edit child's style

问题描述

假设我们有这种风格:

.parent .child { ... }

.parent:hover .child { ... }

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

Both selectors set style for child elements.

我想要编辑第二种样式.

What I would like is to edit the second style.

1. 我点击 .parent 并在 Chrome 开发者工具中设置 :hover 状态
2. 单击 .child 元素以获取孩子的样式，但是...

1. I click on .parent and set :hover state in Chrome developer tools
2. Click on a .child element to get to child's style but...

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

When I click on .child the hover on parent is gone (because it's now set on .child).

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

铬 21.0.1180.89 米

Chrome 21.0.1180.89 m

推荐答案

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

Update: Chrome now has the following new hotness:

1. 右键单击子元素并选择检查元素
   • Chrome 将打开元素视图并选择项目
      

在元素视图中，右键单击父元素并选择强制元素状态 ▶ :hover"

In the Elements view, right-click the parent element and choose "Force Element State ▶ :hover"

再次在 Elements 视图中选择子元素.

Select the child element in the Elements view again.

<小时>

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

用这个JSFiddle测试:

1. 悬停子元素本身(也悬停在父元素上).
2. 右键单击孩子.
3. 使用键盘(不是鼠标)将上下文菜单选择向下移动到检查元素"并按 Enter
   • Hurrah，悬停的父级和选定的子级的 CSS 规则可用

1. Hover the child element itself (which also hovers the parent).
2. Right-click the child.
3. Using the keyboard (not mouse) move the context menu selection down to "Inspect Element" and press Enter
   • Hurrah, the CSS rule for the hovered parent and selected child is available

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

Note that if you do it wrong in step 3 (if you use the mouse) you have to select a different element first before trying again.

这篇关于如何在 Chrome 开发工具中设置元素的:悬停状态并编辑孩子的样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！