Detecting IE6 using jQuery.support

Question

Anyone have any ideas on how to test for something specific for IE6 (and not IE7) using jquery.support?

My problem is that IE6 supports :hover psuedo-class only for anchor elements and IE7 does support it for all elements (as FF, Chrome, etc). So I want to do something special in case the browser does not support :hover for all elements... thus I need a way to test for this feature. (don't want to use jQuery.browser). Any ideas?

Answer 1

jQuery.support has no properties to detect :hover support http://docs.jquery.com/Utilities/jQuery.support

But probably you can simply use the hover() event http://docs.jquery.com/Events/hover

Answer 2

<!--[if IE 6]>
  Special instructions for IE 6 here... e.g.
  <script>...hook hover event logic here...</script>
<![endif]-->

Answer 3

This is one example of where we should take a step back and ask why you're doing that.

Typically it's to create a menu. If so I highly suggest you save yourself some headaches and use a plug-in like superfish or one of the many alternatives.

If not I suggest you use the jQuery hover() event listener. For example:

$("td").hover(function() {
  $(this).addClass("hover");
}, function() {
  $(this).removeClass("hover");
});

will do what you want.

Answer 4

While it's good practice to check for feature support rather then user agent, there's no simple way to check for something like support of a css property using JavaScript. I recommend you either follow the above posters suggestion of using conditional comments or use jQuery.browser. A simple implementation (not validated for performance or bugs) could look like this:

if ($.browser.msie && $.browser.version.substr(0,1)<7) {
  // search for selectors you want to add hover behavior to
  $('.jshover').hover(
    function() {
      $(this).addClass('over');
    },
    function() {
      $(this).removeClass('over');
    }
}

In your markup, add the .jshover class to any element you want hover css effects on. In your css, add rules like this:

ul li:hover, ul li.over { rules here }

Answer 5

Thickbox uses

if(typeof document.body.style.maxHeight === "undefined") {
 alert('ie6');
} else {
 alert('other');
}

Answer 6

I would use Whatever:hover - http://www.xs4all.nl/~peterned/csshover.html

It uses behavior and works well for me.