Fix CSS Pseudo Hover Class
Depending on how long you have been playing around with CSS you may or may not be familiar with the CSS pseudo:hover class. The pseudo: hover class is most commonly used to display content to a user based on user interaction with elements on a web site. A user would hover over a link and a drop down with more links would appear. This was done by declaring your css element rule and adding the pseudo:hover class to the elements rule for an alternative action to be preformed when that element was hovered over.
#div a {normal state}
#div a:hover {alternative state}I strongly encouraged you to use the pseudo:hover class simply because it give us the developers a true and more effectively way of separating our documents styles an behaviors from structure and content by means of CSS alone.
The whole point of the pseudo:hover class was to make the hover behavior accessible to any site element. The Unfortunate thing is IE5 and IE6 never picked up on the whole pseudo part of this class and only allows the pseudo:hover class to be used in anchor tags . This really restricts us developers living in an era that has a good portion of web surfers still using IE5 and IE6, because we the developers are always having to write extra code and come up with unneeded solutions that make our correctly written code work on these two faulty browsers.
At the time this tutorial is written (Nov 12, 2008) www.w3cschool.com states that 20.2% of all internet users are browsing with IE6 and below. If your site navigation depended on the use the pseudo:hover class then you might be losing lots of visitors simply because they can’t use your navigation while browsing with IE5 or IE6.
Until we as a web community abandon these versions of IE then we as developers must always find a way to support them while trying to comply within reason to our W3C standards.
So how do we fix this issue using only pure css and W3C standards? Well to be completely honest, you don’t because this is not a completely pure css hover fix for IE5 and IE6. This fix uses JavaScript to write unavailable behaviors to our lackey browser versions to once and for all support the css pseudo:hover class for all elements. What makes this approach so unique is that fact that you don’t have JavaScript being referenced in any elements through the elements them self by means of “onclick” or “mouseover”, the JavaScript resides in a .htc and the file that gets linked to our document via CSS, so no JavaScript is in your nice clean code. It’s also unique because it’s as close to a true solution while also falling within reason of our W3C compliant standard.
The down side of this method is that currently there are about 9% of all web users who don’t have JavaScript turned on in there browser. However if you think about how many out of that 9% who are using browser that do support the CSS :hover method then that number becomes even small and almost insignificant.
Here is an example of how CSS pseudo hover methods won’t work with <li> elements is IE5.5 and IE6.
Pure CSS Horizontal Navigation Menu
Only distinction is that you would be able to attain the desired stiffness of male reproductive organ levitra australia online by the chemical adjustments carried out by this drug to cure the erection issue: It works only when a man takes alcohol in moderate amount only. Consult with your doctor before taking any erectile viagra in canada purchasing here dysfunction medication. There are lots and lots of buy cialis canada medicines which can show erectile dysfunction as a side effect. To define erectile dysfunction in easier terms it is the best way to read NF Cure and Vital M-40 capsules and one NF Cure capsule daily two times for two to three months to treat the problem of sexual disorders where you will be supplied with cialis discount overnight ‘s that are cheap and you can expect to have better erections. (Note: See IETester desktop application to test across all IE versions. “IETester Home Page“)
Ok with all that out-of-the-way let’s get down to how we fix the issue and make these two browsers work well with the pseudo:hover class. First I have to give credit where credit is due to Peter Nederlof, Arnoud Berendsen, Martin Reurings and Robert Hanson who developed this .htc JavaScript file that brings the CSS2 pseudo:hover class behavior to our two faulty browsers.
Once you have the .htc file we are going to want to reference to it in our document but we will call to it within our headers css style tags, not with the normal script tags used for JavaScript. Here is what the call to our .htc file would look like.
body{behavior:;}Ok what we are doing here is telling our documents body tag that we would like to set up a style for our behaviors or lack there of simply by declaring a rule for the body and a behavior style. Next we need to point our behavior style to our .htc file so our hover behaviors become supported at last with our CSS2 methods.
Make your CSS body rule now look like the following.
body{behavior:url(cssHoverFix.htc);}Hit save and believe it or not you’re done! Hover states behave as they should with all browser and we can still write pure CSS and comply with W3C all day leaving our proper and correct menu methods working as they should for all visitors.
Click below to see the same demo as above but now with the support of our .htc file and pseudo:hover behaviors working perfectly for IE5 and IE6 browsers.
Devin R. Olsen
Devin R. Olsen
Located in Portland Oregon. I like to teach, share and dabble deep into the digital dark arts of web and game development.
Follow Me:
