Question

Suppose we have this style:

.parent .child { ... }

.parent:hover .child { ... }

Both selectors set style for child elements.

What I would like is to edit the second style.

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…

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

^{This works in Firebug though but I need it in Chrome…}

Chrome 21.0.1180.89 m

Answer 1

Update: Chrome now has the following new hotness:

1. Right-click the child element and choose Inspect Element
   • Chrome will open the Elements view with the item selected
      

2. In the Elements view, right-click the parent element and choose “Force Element State ▶ :hover”
   

3. Select the child element in the Elements view again.

---

Older, valid-but-obnoxious technique follows:

Tested with this JSFiddle:

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
4. Edit the rule. (You may move the mouse to do this; the item will be unhovered, but the CSS rule with the :hover in it will not go away.)
5. Hover the mouse back over the element to see the changed rule take effect.

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.