Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I see ":hover" and ":active" properties of elements on a webpage? [duplicate]

In both Google Chrome and Firefox, the hover and active state CSS properties can only be viewed when the element is hovered or clicked. However, as soon as my mouse leaves the element or I release my mouse, I cannot view the properties any more.

Is there a Chrome extension or Firefox addon that can allow me to view the elements in hover or active states?

like image 990
Leo Jiang Avatar asked Jan 03 '12 23:01

Leo Jiang


People also ask

How do you inspect a hovering element?

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.

How do you show hover information in HTML?

HTML: Use a container element (like <div>) and add the "tooltip" class to it. When the user mouse over this <div>, it will show the tooltip text. The tooltip text is placed inside an inline element (like <span>) with class="tooltiptext" .

What is the hover property?

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).


1 Answers

Click on the element inside the element inspector. Move your mouse over the element, press the up arrow key and then the down arrow key. You'll see the hover properties.

like image 119
henryaaron Avatar answered Sep 29 '22 17:09

henryaaron