호버트 이미지가 자동으로 호버 아웃됩니까?

Question

버튼은 위에 6 개의 정사각형 이미지입니다.

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

문제 : 당신이 가져가 두 개의 선택 ... 당신이 rollOverImg에 마우스를 이동할 때 그래서 ... origninalImg의하는 MouseLeave 함수가 호출 $('.originalImg,.rollOverImg') 있습니다. .

솔루션,

이름이 같은 클래스와이 아니요 시험 전체 <div>에 대한 사용 호버하지만이 작업을해야와 div를 모두.

이

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'을 겹치는 " 호버 (hover) 이벤트의 "마우스 아웃"부분을 눌러 발사하십시오. 당신은 원래 & 롤오버 이미지에 별도의 핸들러를 넣을 :

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