3

How can I use feature detection to determine whether a browser supports the :hover pseudo class? I want to do this WITHOUT using conditional comments to include ie6-specific script files if possible.

KaptajnKold
  • 10,638
  • 10
  • 41
  • 56
mhildreth
  • 401
  • 1
  • 5
  • 11
  • 2
    For feature detection, you would need some complex Javascript, which seems like a pretty big dependency - especially seeing as the one and (AFAIK) only browser that doesn't support :hover is indeed IE6 – Pekka Feb 09 '11 at 17:14
  • 1
    In theory, you could set a style on the `body:hover` and then get the computed style for the body and see if it is set. I suspect that would break if the pointer was on the toolbar though. That said, if you are using `:hover` for anything more then an indication that it is worth clicking at the point the pointer is at, then you should probably be looking at JS anyway. `:hover` is just too limiting and tends to mean you have a dependency on people using a pointing device, and on being able to hold it steady (difficult with, for example, arthritis). – Quentin Feb 09 '11 at 17:15
  • 1
    pretty much every major, modern browser supports the :hover pseudo class – heymrcarter Feb 09 '11 at 17:16
  • @David - that's a good thought, but as you pointed out, it won't work if the mouse is outside the window when the script runs – mhildreth Feb 09 '11 at 20:22

2 Answers2

1

If it is ie6 or older, it doesn't support hover. Any other browsers that don't support hover are too old and obscure to worry about.

EDIT

It is possible to make :hover work in ie 6: See here

mikerobi
  • 20,527
  • 5
  • 46
  • 42
  • 1
    Thanks - that's exactly the kind of answer I was NOT looking for – mhildreth Feb 09 '11 at 20:21
  • Everyone's been harping on feature detection over browser detection lately, so I was trying to do my due diligence to go that route. However, it seems I may have to just check for IE6 and do the jquery wireup. – mhildreth Feb 09 '11 at 20:32
  • @Mark Hildreth, in general feature detection is better, but some features are extremely hard or impossible to detect. For example: The ie6 png transparency bug, which I pretty sure is undetectable. – mikerobi Feb 09 '11 at 20:52
1

The :hover pseudo-class is supported by standards compliant browsers. Browsers like IE6 will only support it for <a> elements.

You can however use hover changes on any thing using jQuery, to name one.

$('.class').hover(
    function(){
        $(this).addClass('hover');
    },
    function(){
        $(this).removeClass('hover');
});

In your css, use the class .hover in place of the pesudo-class :hover

daveyfaherty
  • 4,585
  • 2
  • 27
  • 42
  • I love how someone always gives a jQuery solution, even when it isn't asked for. – mikerobi Feb 09 '11 at 17:56
  • I find it's the cleanest way to simulate hover support for all browsers. And I've actually answered his question with a working solution ;) – daveyfaherty Feb 09 '11 at 17:59
  • it isn't very helpful for someone working on a non-jquery project. It is definitely not the cleanest fix; there are fixes that actually make `:hover` work in ie6. See my updated answer. – mikerobi Feb 09 '11 at 18:12
  • I see where you're coming from from. The reason I use the solution I've shown is that it's platform agnostic, and I find code easier to maintain when it's as standard as possible. I consider javascript libraries to be exactly that, and not a separate paradigm. I concede that if you're already loading other libraries, you might not want to involve jQuery in addition. – daveyfaherty Feb 09 '11 at 18:19
  • @puppybard - Good suggestion. However, We're already using jquery, so that's not a problem. However, we have to wire up the hover event to an extremely large number (like 400+) elements on the page. Using jquery to do this requires almost a full second to do this in jquery 1.4.3+. It was significantly faster (and in an acceptable range) in older versions of jquery. What I would like to do is include the css rules for hover, then only run the jquery wire-up (as you suggested) if the browser doesn't support :hover and side-step the whole problem. – mhildreth Feb 09 '11 at 20:25