Clever Geek Handbook

Flickering on hover with mousemove

I am trying to create a hover effect generated by golden-spike.com (and in fact adapting their code). Having some trouble though, since their code is using a negative z-index, which I cannot use because I need a background color on it.

Here is a jsFiddle . You will notice that if you change the z-index of 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 your help!

+3


source to share


2 answers


Try to position 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 hovering text.

+8


source


The mouse move event is captured by the image element, which disables the hover, and if it bubbles up to the title it fires again:

Try:



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

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

0


source






More articles:


All Articles