0

按钮是顶部的六个方形图像。

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>

出于某种原因，即使我的光标仍悬停在图像上，它也会自动推出。

4

2 回答 2

1

问题：您有两个悬停选择器...$('.originalImg,.rollOverImg')所以当您将鼠标移动到 rollOverImg...时，会调用 origninalImg mouseleave 函数..

解决方案，

用相同的类命名所有 div，并为整个<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");
   }

 );
于 2013-07-11T07:17:24.933 回答
1

首先，您的选择器错误：

$('.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(){});
});
于 2013-07-11T07:09:55.887 回答