How to set element: hover state in Chrome dev tools and change child style

Question

Suppose we have this style:

.parent .child { ... } .parent:hover .child { ... } 

Both selectors set the style for children.

I would like to edit the second style.

• I click .parent and set the state :hover in the Chrome developer tools.
• Click on the .child element to go into child style, but ...

When I click .child , hover over the parent element (because it is now set to .child ).

^{This works in Firebug, but I need it in Chrome ...}

Chrome 21.0.1180.89 m

Answer 1

Refresh . Chrome now has the following new fervor:

• Right-click on the child and select Validation.
  • Chrome will open Elements view with the selected item.
    

• In the Elements view, right-click the parent element and select Element Element Status: ▶: hover
  

• Select the child again in the Elements view.

---

An old, valid, but obscene technique follows:

Tested using this JSFiddle :

• Hover over the child object (which also points the parent).
• Right-click the child.
• Using the keyboard (not the mouse), move the context menu down to "Inspect item" and press Enter
  • Uri, CSS rule for born and selected baby is available
• Edit the rule. (You can move the mouse to do this, the element will be saved, but the CSS rule with :hover will not disappear in it.)
• Hover over an item to see how the changed rule takes effect.

Please note that if you do this incorrectly in step 3 (if you are using a mouse), you must first select a different item before trying again.

Answer 2

(Chrome 22)

In the Elements panel, right-click the .parent element and select Force Element State > :hover from the context menu. Voila.

Alternatively, you can click on the "pointer over the dotted line rectangle" button in the Styles panel header on the right and check / uncheck the pseudo-class flags that will be forced to select for the selected element.

The state of an element can now be applied to any element of the DOM tree, not just the currently selected one.

Answer 3

When you have dev tools open and you look at the styles panel on the right side of the title bar where Styles is indicated, there is a plus button where you can add your own rule rules for index tables. This may be what you are looking for.