Bug 18026 - CSS3 Selector Test: combination of hover and general sibling selector fails in Webkit
Summary: CSS3 Selector Test: combination of hover and general sibling selector fails i...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: 528+ (Nightly build)
Hardware: All All
: P2 Normal
Assignee: Nobody
URL: http://disruptive-innovations.com/zoo...
Keywords: HasReduction
Depends on:
Blocks: 12520
  Show dependency treegraph
 
Reported: 2008-03-23 13:59 PDT by Robert Blaut
Modified: 2012-03-08 06:17 PST (History)
6 users (show)

See Also:


Attachments
test case (402 bytes, text/html)
2008-03-23 13:59 PDT, Robert Blaut
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Robert Blaut 2008-03-23 13:59:35 PDT
The CSS3 selectors test suite check this particular case:

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

It fails in Webkit.
Comment 1 Robert Blaut 2008-03-23 13:59:57 PDT
Created attachment 19986 [details]
test case
Comment 2 Yusuke Sato 2009-07-27 01:00:10 PDT
The patch I attached on Bug 18027 (hover-adjacent-v1) also fixes this bug.
https://bugs.webkit.org/show_bug.cgi?id=18027

--Yusuke
Comment 3 Andy E 2011-02-09 09:06:48 PST
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.
Comment 4 Andy E 2011-02-09 09:23:12 PST
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.
Comment 5 Dave 2011-05-07 10:52:30 PDT
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
Comment 6 Jamy 2011-07-28 07:25:56 PDT
When will this be solved? Even IE7 can do this properly... 
http://jsfiddle.net/jamygolden/r45tV/