Menu
I know there must be a way to do this and I've always just worked around it but, is there some way I can see (and/or edit) the pseudo-class styles applied to an element?
For example, Im looking to edit .myclass:hover or #someid:active in the debugger.
ps. Im really more concerned with how to do this in the chrome debugger although firebug is appreciated to!
325
Select the UI element (e.g. a tag) > Inspect Element > Styles Tab, next to the filter box there is a ":hov" section. Click it. Now you can select hover checkbox and see what styles loads on hover.
The :hover CSS pseudo-class matches when the user interacts with an element with a pointing device, but does not necessarily activate it. It is generally triggered when the user hovers over an element with the cursor (mouse pointer).
To clarify, you CAN NOT give :hover to a pseudo element. There's no such thing as ::after:hover in CSS as of 2018.
Inspect the element, and then:
For Firebug:
Note that the hover CSS code will disappear if you fly over the element again (you must recheck :hover).
For Chrome:
You can see both the psuedo-class rules and force them on elements.
To see them in the Styles pane click the small dotted box button in the top right.
To force an element into :hover state, right click it.
152
In Chrome, you just right click (so that you ARE hovering) the div and click on Inspect. If the Inspect box is in the console, when you right click it, your mouse "fall" in the console and you are still hovering the div at the same time. Then you cqn see the :hover pseudo style normally.
This is stupid, but this is my workaround.
34
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
