Наведите изображение автоматически наведите курсор мыши?

Question

кнопки представляют собой шесть квадратных изображений сверху.

http://wthdesign.net/test/rollover/services.html

код я использую:

$(document).ready(function() { 

$('.originalImg,rollOverImg').hover(

    function() { 
    $(this).next().stop().animate({left: '0'}, 500, function(){}); 
    console.log("in"); 
    }, 
    function() { 
    $(this).next().stop().animate({left: '90px'}, 500, function(){}); 
    console.log("out"); 
    } 

); 

мой HTML:

<div class="slicesBoxesTop"><img class="originalImg" src="images/home.png" /><img class="rollOverImg" src="http://makingdesign.com.au/images/mickslice1.gif" width="90" height="90" /></div> 
<div class="slicesBoxTop2"><img class="originalImg" src="images/home.png" /><img class="rollOverImg" src="http://makingdesign.com.au/images/paulslice2.gif" width="90" height="90" /></div> 
<div class="sliceTop3"><img class="originalImg" src="images/home.png" /><img class="rollOverImg" src="http://makingdesign.com.au/images/mickslice2.gif" width="90" height="90" /></div> 
<div class="sliceTop4"><img class="originalImg" src="images/home.png" /><img class="rollOverImg" src="http://makingdesign.com.au/images/paulslice3.gif" width="90" height="90" /></div> 
<div class="sliceTopbox5"><img class="originalImg" src="images/home.png" /><img class="rollOverImg" src="http://makingdesign.com.au/images/mickslice3.gif" width="92" height="92" /></div> 

По какой-то причине он свитка автоматически, даже когда мой курсор еще в наведении изображение ,

Answer 1

проблемы: у вас есть два выбора в режиме висения ... $('.originalImg,.rollOverImg') так, когда вы перемещаете мышь rollOverImg ... функция MouseLeave origninalImg называется. .

раствор,

имя все, что вы дивы с таким же классом и использования левитации для всей <div> .not испытания, но это должно работать.

попробовать этот

HTML

<div class="slicesBoxesTop divClass"><img class="originalImg".. 
<div class="slicesBoxTop2 divClass"><img class="originalImg" ... 
..so on 

Jquery

$(document).ready(function() { 

$('.divClass').hover(
    function() { 
     $(this).find('.rollOverImg').stop().animate({left: '0'}, 500, function(){}); 
    console.log("in"); 
    }, 
    function() { 
    $(this).find('.rollOverImg').stop().animate({left: '90px'}, 500, function(){}); 
    console.log("out"); 
    } 

); 

Answer 2

Во-первых, ваш селектор является неправильным:

$('.originalImg,rollOverImg').hover

Должно быть:

$('.originalImg,.rollOverImg').hover

Во-вторых, ваш 'rollOverImg' перекрывает 'originalImg' при вызове анимации в результате чего " вытащите "часть вашего события зависания, чтобы стрелять. Вы хотите поместить отдельные обработчик на ваше оригинальном & опрокидывании изображений:

$(".originalImg").mouseenter(function() { 
    $(this).next().stop().animate({left: '0'}, 500, function(){}); 
}); 
$(".rollOverImg").mouseleave(function() { 
    $(this).prev().stop().animate({left: '90px'}, 500, function(){}); 
});