Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to use chrome web inspector to view hover code

Using chromes web inspector to view code is very useful. But how do you view for example the hover code for a button? You will have to hover the mouse over the button and thus cannot use it (mouse) in the inspector. Are there any shortcuts or other ways to accomplish this in the inspector?

like image 557
Bo. Avatar asked Apr 26 '11 11:04

Bo.


People also ask

How do you simulate hover in Chrome?

To see the rules like :hover in the Styles pane click the small dotted box button in the top right. To force an element into :hover state, right click it. Alternatively, you can use Event Listener Breakpoints sidebar pane in the Scripts panel and select to pause in mouseover handlers.


2 Answers

Now you can see both the pseudo-class style rules and force them on elements.

To see the rules like :hover in the Styles pane click the small dotted box button in the top right.

To force an element into :hover state, right click it.

Alternatively, you can use Event Listener Breakpoints sidebar pane in the Scripts panel and select to pause in mouseover handlers.

like image 118
Travis Northcutt Avatar answered Sep 18 '22 18:09

Travis Northcutt


Alternatively, you can use Event Listener Breakpoints sidebar pane in the Scripts panel and select to pause in mouseover handlers.

like image 20
Yury Semikhatsky Avatar answered Sep 21 '22 18:09

Yury Semikhatsky