Closed Bug 1042523 Opened 10 years ago Closed 9 years ago

[markup-view] displays :hover state on each element on breadcrump

Categories

(DevTools :: Inspector, defect)

30 Branch
x86_64
Linux
defect
Not set
normal

Tracking

(Not tracked)

RESOLVED WORKSFORME

People

(Reporter: friedrich, Unassigned)

Details

User Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:30.0) Gecko/20100101 Firefox/30.0 (Beta/Release)
Build ID: 20140608211828

Steps to reproduce:

I visit 
https://addons.mozilla.org/de/firefox/
and start Firefox SiteInspector to look at the Element "#site-nav".

Now with Firefox Inspector, I activate the :hover state of "#site-nav > li". 


Actual results:

it displays the hover state on each element in the breadcrumb navigation.


Expected results:

i think only the seleccted element should get the hover state.
Component: Untriaged → Developer Tools: Inspector
That's correct behavior. The ancestors of a hovered element also get :hover applied. To quote the Selectors spec[1]:

> The parent of an element that matches :hover also matches :hover.

Hover the 'child' <div> in this example for an illustration

data:text/html,<!DOCTYPE html><style type="text/css">%23parent, %23child {width:100px;height:100px;text-align:center} %23parent {background-color:%236464ff;} %23child {position:absolute;top:50px;left:150px;background-color:%23c8c8ff;} %23parent:hover {background-color:yellow;} %23child:hover{background-color:yellow;}</style><div id="parent">parent<div id="child">child</div></div>

and you'll see that both, the child and the parent, become yellow.

Sebastian

[1] http://dev.w3.org/csswg/selectors-4/#the-hover-pseudo
Status: UNCONFIRMED → RESOLVED
Closed: 9 years ago
Resolution: --- → WORKSFORME
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.