javascript - 检测 div 的侧面并悬停

Question

我正在使用这个例子 http://jsfiddle.net/MJTkk/2/为了找到光标所在的位置(在我的例子中是左边还是右边)。我也有两个图像，我希望 second.png 平滑地悬停在另一个图像上，但悬停在光标的方向上(跟随光标)。

<div class="box" id="box" style="margin:100px 0px 0px 100px">
    <a href="#" target="_blank">
        <div class="under_div"></div>   
        <div class="over_div"></div>    
     </a>   
</div>

.box {
position:relative;
width:100px;
height:100px;
}
.under_div
 {
    background-size: 100px 100px;   
    height: 100%;
    width: 100%;
    position: absolute;
    background-image:url(http://s30.postimg.org/dd01lyrjx/first.png);
    background-repeat: no-repeat;
    background-position: top right;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.over_div
{
    background-size: 100px 100px;   
    height: 100%;
    position: absolute;
    background-image:url(http://s21.postimg.org/wjrhdklar/second.png);
    background-repeat:no-repeat;
    background-position: top left;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.box:hover .over_div
{
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}   

我实现了这个http://jsfiddle.net/9yj8or2z/1/因为我不知道如何正确解释它。对不起我的英语。

我看到它不能正常工作，并且由于某种原因悬停时 div 会移动。如果有人可以提供帮助，我将不胜感激!

Answer 1

您应该为 .under_div 完全删除 jquery 函数中的 css

我更新了你的FIDDLE如果这是你想要实现的。

编辑 我再次更新了 fiddle 。如果 over_div 来自右边(所以在第一个函数的 else 标签中)，你必须给它一个 position: absolute;右:0； left: auto; 在第二个函数中 right: auto;左:0；

FIDDLE NO 2 BOTH DIRECTIONS WORKING

询问您是否还有其他问题，但应该就是这些了!