If Jquery .is(":hover") not working in IE8

Question

I have this code that doesn't work in IE8:

$("#intro-screenshot").hover(
   function(){
      $(".img-action").show();
   },
   function(){
      if(!$(".img-action").is(":hover")) {
         $(".img-action").hide();
      }
   }
);

It breaks on this line: if(!$(".img-action").is(":hover"))

HTML:

<a href="#">
   <img src="#" alt="" id="intro-screenshot" />
   <span class="img-action" style="top:90px; left:115px;">
   See Features
   </span>
</a>

I don't think this is a known Jquery problem but I might be wrong..

JSFIDDLE

Answer 1

You could just use CSS. It handles the exact issue you're looking to solve, and more elegantly too.

#inner {
    display: none;
}

#outer:hover #inner {
    display: block;
}

jsFiddle: http://jsfiddle.net/7xMpr/

EDIT:

And a jsFiddle using your code http://jsfiddle.net/QeLSJ/1/

Answer 2

What if you try this:

$("#intro-screenshot").hover(
   function(){
      $(".img-action").show();
   },
   function(){
       if($(".img-action:hover").length == 0) {
         $(".img-action").hide();
      }
   }
);

Answer 3

try{
    jQuery('body').live('click', function(){
    var booleans=0; 
    try{
        booleans=jQuery("#loginForm:hover").length;
        //booleans=jQuery('#loginForm').is(':hover');
    }catch(e){}
    if(booleans==0){
        document.getElementById("d1").style.display = 'none';
    }
  });       
}catch(e){}