hover() trigger behavior in Internet Explorer 10

hover() trigger behavior in Internet Explorer 10

Hi, I'm pretty new at jQuery/javascript so please excuse if this is really stupid ...

I'm trying to code a mouseover behaviour on a website where when the mouse enters an image, an overlay of text appears above the image, and persists until the mouse leaves the image. 

To achieve this, I've marked up a mouse catchment div that covers the entire image, and is greater in the stack order such that it is above both the image div and the overlay text div.

Then, I've used the following to code the behavior I want, which works fine in the latest versions of Firefox, Chrome and Safari.
  1. $('#mouse_catch').hover(
  2. function(){$('#overlay').fadeIn(200)},
  3. function(){$('#overlay').fadeOut(200)}
  4. )
However, this doesn't work at all in IE, so instead, I've used the following code for now:
  1. $('.fade').hover(
  2. function(){$('#overlay').fadeIn(200)},
  3. function(){$('#overlay').fadeOut(200)}
  4. )
Where I've given the 'fade' class to the overlay, the mouse catchment and the image divs. The event now triggers correctly when the mouse enters the image, but when the mouse moves between the image and the superimposed overlay, it triggers both the mouseenter and mouseleave events, even though the mouse is still technically in .fade, and even though the mouse catchment div should overlie everything.

I've tried a few other things to no avail ... so if a better approach is obvious to anyone I'd greatly appreciate the help.

Thanks :)

Edit // the page in question is the index of http:// www dot serendipityimage dot com dot au/