CODEWITHSUNDEEP
jqueryhtmlcsshovermousemove
Greg Ruben
Greg Ruben

Reputation: 43

Flickering on hover with mousemove

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!

Upvotes: 4

Views: 1796

Answers (2)

Brian Dillingham
Brian Dillingham

Reputation: 9356

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.

Upvotes: 8

Dam
Dam

Reputation: 244

The mouse move event gets captured by the image element which turns the hover off and if it bubbles up to the title it's fired again:

Try:

$(".title").next(".show_img").css({'top':mouseY+10,'left':mouseX+10});

DEMO http://jsfiddle.net/tNms9/423/

Upvotes: 0

Related Questions