Question

我希望图像在悬停时移动，条件为：

- image move away from mouse for 100px to right if mouse come from left side and vice versa.
- image can continuously move to one direction, when hit #div boundary will move to opposite istead.

我几乎无法将它组合起来，这里是我的基本代码：

在悬停时移动图像

$(document).ready(function()
{  $("#image").mouseover(function()
   {  $("#image").animate({left:'250px'});
   });
});

在悬停时捕捉鼠标位置

jQuery(document).ready(function(){
   $(document).mousemove(function(e){
      $('#status').html(e.pageX +', '+ e.pageY);
   }); 
})

。非常感谢。感谢

Answer 1

您可以将图像放入由1px宽边框div填充的div中。将鼠标悬停监听器附加到其中的每一个，例如左侧入口监听器到左侧div，右侧入口监听器到右侧div等等。

HTML：

<div id="box" style="background:#98bf21;height:100px;position: absolute;left:100px; width:200px;">
<div id="skinDiv">
    <div id="leftboundary"></div>
</div>
</div>

CSS：

#leftboundary{
    height:100%;
    width:20px;
    position:absolute;
    top:0px;
    right:0px;
    background:blue;
}

这是一个简短的小提琴，从我回答的另一个问题重复使用：http://jsfiddle.net/PRZYN/10/

编辑：改进小提琴：http://jsfiddle.net/PRZYN/11/

jQuery on hover：将图像从鼠标移开

1 个答案: