a.foo:hover and a:hover.foo are treated identically in modern browsers. I've tested back to IE6, and it works as expected. That being said, my personal preference is to define the selector first and then apply the psuedo-class; e.g. a.foo:hover. I just feel it reads more intuitively.
This was a question asked on Quora that I thought would be a nice additional reading here...One of the "huh" moments for me, so I figured I'd re-share. :-)
What's your secret technique for getting :hover to work in IE6?
ReplyDeleteIE6 does support :hover, but only on links. If you'd like your IE6 users to see some hover behavior on something that isn't a link, you'd need to consider a JavaScript approach; e.g. In jQuery you could use .mouseover() to add a hover class to your element via .addClass().
ReplyDeleteOffhand, I don't know if there are some similar issues with this particular .js approach with IE6, though knowing that particular browser, it sure wouldn't surprise me.
That being said, there are some alternate approaches to this problem.
1) Don't do anything special for IE6. Asking browsers to support something that they don't naturally is often problematic, and may not be worth the extra effort to support. We don't always have this luxury, so:
2) Re-consider your HTML. For example, if you currently have links inside of list items, consider dropping your list entirely, and instead add your list styling to your anchors. This approach may stretch your adherence to semantic markup, but IE6 will be playing more nicely with your :hover.
We used to use anchors sparingly as inline elements within lists of options (think a list of shoe choices on a website), but we want each list item, and it's contents to highlight with some nice styling on :hover. As an alternative, we can include block elements within an anchor tag, and set our anchor to display: block, making the entire set of contents within each of our shoe choices clickable AND hoverable in IE6 (note: you may want to be sure you're using the HTML5 doctype, as I'm not 100% sure (yet) if there are any quirky behaviors using different doctypes: http://www.w3schools.com/html5/tag_doctype.asp).
Pretty long winded response - perhaps I see a new blog post with some examples coming up. :-)