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

2022-01-22 00:00:00 google-chrome google-chrome-devtools hover css

假设我们有这种风格:

.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.

相关文章