I recently discovered a bug in Safari (Mac and PC) related to use the :hover pseudo class in conjunction with an adjacent sibling selector. The problem is that the mouseover event correctly changes the adjacent sibling's style, but when the mouseout event occurs the style is never reset. This means if you have the selector ul li:hover + li the adjacent selector's (+ li) style will be changed when the user hovers over the element, but the style is never reset once the user mouse's out of the element.
I've tested this CSS selector combination in IE7, IE8b1, FF2 (PC and Mac) and FF3b4 and in all those browsers when the mouse leaves the element being hovered, the style of the sibling element is reset to it's original state.
One problem with stating this as a "bug" is that I believe the CSS spec is unclear on what the correct behavior should be, but I do believe that the other browsers got this right. I definitely expect any visual changes applied to the screen on the :hover pseudo class to be undone when mouse leaves the target area.
It turns out I'm not the first to find problems with Safari's implementation of the :hover and adjacent sibling selector.
To see this bug in action, move your mouse pointer from the bottom of the list to the top. If you move from top to bottom you will not see the bug since the style is correctly reset once you mouse over the sibling element.
Here's what the CSS looks like behind the scenes:
Odds are high that you might never run into this bug, but I'm working on a menu system that requires a pretty complex CSS rule set and this bug is causing me serious problems in Safari. I may end up needing to implement a JS in order to resolve the problem.
Comments for this entry have been disabled.