懸停圖像自動懸停？

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 ...的origninalImg鼠標離開函數被調用。 。

解決方案，

名稱都與你同一類和使用懸停整個<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' 當你調用動畫引起「將鼠標懸停事件的一部分鼠標移出。你希望把不同的處理器上原來的&鼠標經過圖像：

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