Мерцание при наведении с mousemove

Question

Я пытаюсь создать эффект наведения, вдохновленный golden-spike.com (и, фактически, адаптируя их код). Однако есть некоторые проблемы, поскольку их код использует отрицательный z-индекс, который я не могу использовать, потому что мне нужен цвет фона на странице.

Адрес jsFiddle. Вы заметите, что если вы измените z-index на класс .show_img на -1, мерцание полностью исчезнет.

Вот Javascript настоящее время я использую:

$(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"); 

    }); 
}); 

Заранее спасибо за любую помощь!

Answer 1

Попробуйте установить изображение немного дальше от курсора

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

jsFiddle Example

Проблема заключалась в том, что событие вызвало парение изображения, которое охватывает текст будучи колебался.

Answer 2

Событие движения мыши получает захвачено элементом изображения, который превращает парение прочь, и если он пузырится в название он выстрелил еще раз:

Try:

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

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