1657288 - Inspector does not update with hover

Status: RESOLVED WORKSFORME

(DevTools :: Inspector, defect)

Description

[Yves Goergen [:ygoe]]

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:79.0) Gecko/20100101 Firefox/79.0

Steps to reproduce:

The F12 tools CSS style inspector does not update when the styles change due to a mouse hover event. Like this HTML:

<style>
a:hover { color: red; }
</style>
<a href="#">Link</a>

When inspecting the link, you can see its default style. When hovering it, or when manually activating the :hover style through the checkbox, the styles do not update to also show the red colour. This also applies when hovering a parent element and inspecting a child element's styles.

Actual results:

The page style changes but none of that is visible in the inspector.

Expected results:

Styles should update to reflect the current state. This has very often worked before. And it's critical to debug styles. Switching to Chrome now to continue this work.

Comment 1

[Yves Goergen [:ygoe]]

Oh great, Chrome has the same bug now. (Or always had? Never used it much.) No :hover styles at all can be inspected in both browsers. What's up here?!

Comment 2

[BugBot [:suhaib / :marco/ :calixte]]

Bugbug thinks this bug should belong to this component, but please revert this change in case of error.

Comment 3

[BugBot [:suhaib / :marco/ :calixte]]

The severity field is not set for this bug.
:gl, could you have a look please?

For more information, please visit auto_nag documentation.

Comment 4

[Razvan Caliman [:rcaliman]]

Attachment: hover-style.mp4

Hover styles show only when using the menu to enforce one of the pseudo-classes. Styles do not appear while hovering manually over the node. Regarding :visited links, see this security constraint.

Tested in Firefox Nightly (81) and Firefox Release (79). Both work as expected.

Steps to check

• Run this in a new tab:

data:text/html,<style>a:hover {color: red} a:visited{color:pink}</style><a href="/">link

• Open Inspector, select the <a> element
• In the Rules sidebar panel, click ":hov" to open the pseudo-class menu
• Select the ":hover" option
• Observe the new styles showing up in Rules panel

Alternative

• Right click on the <a> element in the Elements tree
• From the context menu select "Change pseudo-class > :hover"
• Observe the new styles showing up in Rules panel