18026 2008-03-23 13:59:35 -0700 CSS3 Selector Test: combination of hover and general sibling selector fails in Webkit 2022-01-28 05:10:18 -0800 1 1 1 Unclassified WebKit CSS 528+ (Nightly build) All All RESOLVED WORKSFORME http://disruptive-innovations.com/zoo/css3tests/selectorTest.html#target HasReduction P2 Normal --- 12520 1 webkit webkit-unassigned allan.jensen andyearnshaw dkwestbr jamyg88 Justin koivisto yusukes oldest_to_newest 74878 0 webkit 2008-03-23 13:59:35 -0700 The CSS3 selectors test suite check this particular case: .tilda .t1:hover ~ .unitTest { background-color: red; } It fails in Webkit. 74879 1 19986 webkit 2008-03-23 13:59:57 -0700 Created attachment 19986 test case 134855 2 yusukes 2009-07-27 01:00:10 -0700 The patch I attached on Bug 18027 (hover-adjacent-v1) also fixes this bug. https://bugs.webkit.org/show_bug.cgi?id=18027 --Yusuke 348276 3 andyearnshaw 2011-02-09 09:06:48 -0800 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. 348298 4 andyearnshaw 2011-02-09 09:23:12 -0800 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. 400088 5 dkwestbr 2011-05-07 10:52:30 -0700 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 443478 6 jamyg88 2011-07-28 07:25:56 -0700 When will this be solved? Even IE7 can do this properly... http://jsfiddle.net/jamygolden/r45tV/ 1756032 7 jamyg88 2021-05-02 02:42:21 -0700 This was fixed long ago and can be closed :) 1834899 8 koivisto 2022-01-28 05:10:18 -0800 👍 19986 2008-03-23 13:59:57 -0700 2008-03-23 13:59:57 -0700 test case test-case text/html 402 webkit PCFET0NUWVBFIGh0bWw+CjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+CiAgICBkaXYgeyBib3JkZXI6 IDFweCBzb2xpZDsgaGVpZ2h0OiAxZW07IG1hcmdpbi1ib3R0b206MC41ZW19CiAgICAudGVzdCB7 IGJhY2tncm91bmQtY29sb3I6IHdoaXRlOyB9CiAgICAudGVzdCB+IGRpdiB7IGJhY2tncm91bmQt Y29sb3I6IGJsdWU7IH0KICAgIC50ZXN0OmhvdmVyIH4gZGl2IHsgYmFja2dyb3VuZC1jb2xvcjog bGltZTsgfQo8L3N0eWxlPgo8ZGl2IGNsYXNzPSJ0ZXN0Ij50aGUgdGhyZWUgbGFzdCBkaXZzIHNo b3VsZCBiZSBibHVlIGFuZCBiZWNvbWUgZ3JlZW4gd2hlbiB0aGUgcG9pbnRlciBob3ZlcnMgb3Zl ciB0aGUgd2hpdGUgZGl2PC9kaXY+CjxkaXY+PC9kaXY+CjxkaXY+PC9kaXY+CjxkaXY+PC9kaXY+ Cgog