css - 如何设置元素的:hover state in Chrome dev tools and edit child's style

Question

假设我们有这样的样式:

.parent .child { ... }

.parent:hover .child { ... }

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

我想编辑第二种样式。

1. 我点击 .parent 并在 Chrome 开发者工具中设置 :hover 状态
2. 点击 .child 元素进入子样式但是...

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

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

Chrome 21.0.1180.89 m

Answer 1

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

1. 右键单击子元素并选择检查元素
   • Chrome 将打开元素 View 并选中该元素
     

2. 在“元素” View 中，右键单击父元素并选择“强制元素状态 ▶ :hover”
   

3. 再次在“元素” View 中选择子元素。

---

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

使用 this JSFiddle 测试:

1. 悬停子元素本身(也悬停父元素)。
2. 右键点击 child 。
3. 使用键盘(不是鼠标)将上下文菜单选项向下移动到“检查元素”，然后按 Enter
   • Hurrah，悬停的父项和选定的子项的 CSS 规则可用
4. 编辑规则。 (您可以移动鼠标来执行此操作；该元素将取消悬停，但带有 :hover 的 CSS 规则不会消失。)
5. 将鼠标悬停在元素上以查看更改后的规则是否生效。

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