Flickering on hover with mousemove

Question

I'm attempting to build a hover effect inspired by golden-spike.com (and adapting their code, actually). Having some trouble, though, since their code uses a negative z-index, which I cannot use because I need there to be a background color on the page.

Here is the jsFiddle. You'll notice if you change the z-index on the .show_img class to -1 the flickering disappears completely.

Here's the Javascript I'm currently using:

$(document).ready(function() {
var mouseX;
var mouseY;
$(".title").mousemove( function(e) {
   mouseX = e.clientX; 
   mouseY = e.clientY;
});  
$(".title").hover(
  function () {
    $(this).next(".show_img").css("visibility","visible");
    $(window).bind('mousemove', function(e){
        $(".title").next(".show_img").css({'top':mouseY,'left':mouseX});
    });
  },
  function () {
    $(".show_img").css("visibility","hidden");

  });
});

Thanks in advance for any help!

Answer 1

Try positioning the image a little further from the cursor

mouseX = e.clientX + 5; 
mouseY = e.clientY + 5;

jsFiddle Example

The problem was that the hover event triggered an image that covered the text being hovered.