Chrome Dev Tools Question

This may be the wrong place to ask this, sorry. I’m trying to use the Inspect feature of Chrome Dev Tools. More specifically I want to view the CSS of an element when it is in the Hover state. I can put the element in the Hover state but it does no good. The CSS doesn’t change and stays in its normal state. If I click on the element, it goes to its Active mode. I don’t know the correct sequence of steps to view the Hover state CSS. Thanks.

forcing the state to hover will do what you want - IF the css is applied to that element. Are you sure it’s applied to that element, and not a container of that element?

Hi,

I can hover over the element and it changes as it should. The Hover CSS is applied to the element.

http://development.katholiekalmere.nl/kalendar/

(What element are you trying to inspect? Link’s no good to me if i don’t know what you’re trying to look at.)

I would like to view the CSS of the Hover state of any of the navigation links in the navbar. Thanks.

And what happens when you force the Hover state on the <li> containing the link?

Note that when you are hovering on an element, you are also hovering on every container OF that element - so if forcing the state on the specific element doesn’t get you what you want, work your way back up the chain until it does.

That’s the answer. I needed to move up one level. Thank you very much.

2 Likes