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

如果您的问题是灰色png在悬停时也在移动，我认为此解决方案有效。

＆＃13;

.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;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<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>

＆＃13;

{{1}}

＆＃13;

Answer 2

我修复了一些问题：http://jsfiddle.net/9yj8or2z/2/

通过向CSS添加left: 0;和width: 0px;，以及添加overflow:hidden;，我可以修复灰色框在开头错误地移动，但仍然是动画。

我希望这就是你要找的东西：）

Answer 3

您应完全删除css功能中的jquery代码.under_div

我更新了您的FIDDLE，如果这是您想要实现的目标。

编辑我再次更新小提琴。如果它来自右边（在第一个函数的else标签中）position: absolute; right: 0; left: auto;和第二个函数right: auto; left: 0;

FIDDLE NO 2 BOTH DIRECTIONS WORKING

问你是否还有其他问题，但这应该是它！

检测div的一侧并悬停

3 个答案: