comprar viagra online
comprar viagra generico barato
comprar cialis generico online
comprar cialis online seguro
Webkit Bug: Hover and Sibling Selector |
Not only Internet Explorer has it flaws when it comes to parsing/using the CSS file. Even though the Webkit engine is the best CSS engine out there (at the moment), I was still able to find a little bug while searching for a solution to a problem last week. Although the bug is really small and you'll probably never need to use it in real life, I did want to give it a little attention (just in case you do want to solve this problem). I found this one since I wanted to create another Proof of Concept for an article here. Of course, I hope this problem could be solved in the next release of the engine. In simple words, this bug occurs when combining the generic sibling selector (in CSS: Take note this is a Basics Let's first dive into the HTML before we look at the problem. This will allow me to make easier references to the goal we're trying to achieve. As usual, I've kept the HTML as simple as possible, just for the sake of the demo. <div class="green box"></div> <div class="red box"></div> <div class="orange box"></div> <div class="target"> <p>This is my target text.</p> </div> And some (basic) CSS: .box { width:100px; height:100px; } .green { background-color:green; } .red { background-color:red; } .orange { background-color:orange; } Nothing really special going on here as you can see: Just a couple of divisions (boxes with colors) and a target text. Do you know what we're trying to achieve already? The problem As you might have thought, I try to change the color (text color) of the last element while hovering the dedicated elements before that. In half-tech half-normal words:
“ When hovering a Sounds like a reasonable thing to do. For those who aren't fully familiar with all the CSS selectors, the When you have the following CSS: div ~ p { color : green; } It will target all the CSS So, what's the CSS I would expect to work? Here we go: .green:hover ~ .target { color:green; } .red:hover ~ .target { color:red; } .orange:hover ~ .target { color:orange; } Looks very logical, doesn't it? When you Solutions Of course, there are workarounds to make it work in those browsers as well (although I would prefer the CSS only solution that is described above). The first solution I looked at is using a totally different HTML structure, so we don't need the use of the sibling selector. Here's the new HTML: <div class="green box"> <div class="red box"> <div class="orange box"> <div class="target"> <p>This is my target text.</p> </div> </div> </div> </div> Of course, we'll also need some changes to the CSS (I've added some comments to explain what it does): /* Move the 2nd and 3rd box to the right and clear the top margin */ .red, .orange, .target { margin-left:110px; margin-top:0; } /* We manually set the width of the text, since it's in a smaller container */ .target { width:470px; } /* We need to override to prevent the color to go orange (the last container) */ .target:hover { color:#777 !important; } /* Now we can use the :hover event for the boxes to set the target color */ .green:hover .target { color:green; } .red:hover .target { color:red; } .orange:hover .target { color:orange; } Since the Personally, I don't really like this solution since you'll need to change the structure of your HTML. Also, your CSS uses some dirty tricks (like the For this solution, we don't need to change any of the HTML and the generic CSS classes. $(".box").hover(function() { // Set the color by using the class name from the box when hovering $(this).siblings(".target").css("color", // Since we know the HTML has two classes ("color" and "box"), we'll need to retrive // the data from the first one, and set that as the active color. $(this).attr("class").split(" ")[0] ); }, function() { // Reset the color when the hover is done $(this).siblings(".target").css("color", "#777"); }); This solution seems to be working in every browser, including those who are running on Final thoughts It's a bummer this doesn't work as expected in Chrome/Safari, especially since those browsers are the Rolls Royce when it comes to CSS. Still, with some additional knowledge you can work around this problem to make it work everywhere. Have you ever seen this bug before, and if so, how did you handle it? What did you think of the two solutions? And would you know a better one? Tags: webkit bug hover sibling selector css Interested in this topic? You might enjoy another article I've written called |
< Prev | Next > |
---|
Search |
---|
Or try the sitemap |