Bug 18026

Summary: CSS3 Selector Test: combination of hover and general sibling selector fails in Webkit
Product: WebKit Reporter: Robert Blaut <webkit>
Component: CSSAssignee: Nobody <webkit-unassigned>
Status: RESOLVED WORKSFORME    
Severity: Normal CC: allan.jensen, andyearnshaw, dkwestbr, jamyg88, Justin, koivisto, yusukes
Priority: P2 Keywords: HasReduction
Version: 528+ (Nightly build)   
Hardware: All   
OS: All   
URL: http://disruptive-innovations.com/zoo/css3tests/selectorTest.html#target
Bug Depends on:    
Bug Blocks: 12520    
Attachments:
Description Flags
test case none

Robert Blaut
Reported 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.
Attachments
test case (402 bytes, text/html)
2008-03-23 13:59 PDT, Robert Blaut 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Robert Blaut
Comment 1 2008-03-23 13:59:57 PDT
Created attachment 19986 [details] test case
Yusuke Sato
Comment 2 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
Andy E
Comment 3 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.
Andy E
Comment 4 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.
Dave
Comment 5 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
Jamy
Comment 6 2011-07-28 07:25:56 PDT
When will this be solved? Even IE7 can do this properly... http://jsfiddle.net/jamygolden/r45tV/
Jamy
Comment 7 2021-05-02 02:42:21 PDT
This was fixed long ago and can be closed :)
Antti Koivisto
Comment 8 2022-01-28 05:10:18 PST
👍
Note You need to log in before you can comment on or make changes to this bug.