How to set element's :hover state in Chrome dev tools and edit child's style

问题

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

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

回答2:

(Chrome 22)

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

Alternatively, you can click the "pointer over a dotted rectangle" button in the Styles pane header at the right and check/uncheck pseudo-classes to be forced on the currently selected element.

Element state can now be forced on any elements in the DOM tree, not only the currently selected one.

回答3:

When you have the dev tools open and your looking at the style pane on the right side of the header bar where it says Styles, there is a plus button where you can add custom inspector-stylesheet rules. This may be what your looking for.

来源：https://stackoverflow.com/questions/12392049/how-to-set-elements-hover-state-in-chrome-dev-tools-and-edit-childs-style