CSS3 Selector Test: combination of hover and general sibling selector fails in Webkit

• Component: CSS
• Status: RESOLVED WORKSFORME

[Robert Blaut]

The CSS3 selectors test suite check this particular case:

 .tilda .t1:hover ~ .unitTest { background-color: red; }

It fails in Webkit.

[Robert Blaut]

Created attachment 19986 [details]
test case

[Yusuke Sato]

The patch I attached on Bug 18027 (hover-adjacent-v1) also fixes this bug.
https://bugs.webkit.org/show_bug.cgi?id=18027

--Yusuke

[Andy E]

Yasuke:

I believe the patch you attached on Bug 18027 doesn't fix this problem fully.  I was helping a developer with a demo that involves highlighting elements that are floated to the right.  As you move from the left element through the other elements, they each remain highlighted up to the currently hovered element - which is correct behavior.  However, when moving the mouse away from all the elements the highlight should be removed completely but it isn't.  Also, hovering over the elements individually doesn't achieve the desired effect.

The demo I was working on is located at http://jsfiddle.net/H9Rn6/.  The code is as follows:

HTML

    <div id="container">
        <div class="iconFavorite"></div>
        <div class="iconFavorite"></div>
        <div class="iconFavorite"></div>
        <div class="iconFavorite"></div>
        <div class="iconFavorite"></div>
    </div>

CSS

    .iconFavorite:hover, .iconFavorite:hover ~ div {
        background-image: url(http://www.custom52.com/Images/star_icon.gif);
    }
    
    .iconFavorite{
        float: right;
        background: url(http://t3.gstatic.com/images?q=tbn:ANd9GcRk4Mbns-pCrOXWL5WIiY-iy6syBtYLKzJKc5GSa9Ak9RGM_uDbEg&t=1) no-repeat;
        width: 16px;
        height: 16px;
        border: none;
        display:inline-block;
    }

Internet Explorer 7+, Firefox 2+ and Opera 9+ all exhibit the correct behavior.

[Andy E]

Furthermore, it seems that the ~ adjacent sibling selector is buggy when used dynamically in general.  Using my previous example to apply the hover effect using JavaScript -- whilst retaining the ~ selector for adjacent siblings -- results in styles not being applied to the adjacent siblings.

http://jsfiddle.net/H9Rn6/3/

Still working as expected in non-WebKit browsers.

[Dave]

THIS IS STILL AN ISSUE:

To reproduce:
http://jsfiddle.net/uNZSX/14/

To get a more detailed explanation:
http://stackoverflow.com/questions/5061509/why-doesnt-this-css-selector-work-ahover-span

[Jamy]

When will this be solved? Even IE7 can do this properly... 
http://jsfiddle.net/jamygolden/r45tV/

[Jamy]

This was fixed long ago and can be closed :)

[Antti Koivisto]

👍