Bug 17976 – can't target next sibling element when using :hover pseudo selector and next element combinator

• Status: RESOLVED
• Resolution: DUPLICATE
• Component: CSS

[M. Dave Auayan]

The behavior of using the pseudo selector ":hover" and the next combinator "+" is incorrect. When the hovered element loses focus, the next element still retains the style assigned with the :hover declaration.

Firefox and Internet Explorer 7 behave as expected.

With any luck the following code should help illustrate my point.

<style>
    li:hover{
      background:red;
    }
    
    li:hover + li{
      background:green;
    }

    li a{
      background:grey;
  }

</style>

<ul>
  <li>first element</li>
  <li>second element</li>
  <li>third element</li>
</ul>

Upon hovering over the element, the hovered li should display a green background, and the next element should display a red background. These elements don't actually display a red background unless it was hovered over then moved to a previous element. When it loses :hover, the next element still retains its background color. 

Wow that ended up rather... circuitous.

[Dave Hyatt]

*** This bug has been marked as a duplicate of 9279 ***