在鼠标移动时用颜色填充容器

Question

假设我有一个 div 100px 宽 x 40px 高和橙色背景。我想运行我的鼠标从左到右穿过 div，当鼠标移动时它应该用绿色填充 div。一旦鼠标越过 div 的末尾，颜色应保持绿色。如果鼠标光标在通过结束之前从 div 出来，颜色应该 animate/fill 变回橙色。此外，鼠标必须从 div 的开头（ 0px ）开始，鼠标移动效果才能开始，否则它什么都不做。

我在这上面花了几天时间，它快把我逼疯了。

这是我目前所拥有的fiddle

enter code herehttps://jsfiddle.net/7my7etzm/

Answer 1

这项工作？

$(document).ready(function() {
  var $orangeBox = $(".orangeBox"),
      $greenBox = $(".greenBox"),
      $goalPosts = $(".goalPosts"),
      winning = function() {
        $orangeBox.unbind('mousemove').unbind('mouseleave');
        $goalPosts.remove();
      };
  
  $orangeBox.bind('mousemove', function(e) {
    var xPosition = e.pageX - this.offsetLeft;
    $goalPosts.show();
    $greenBox.css('width', xPosition);
    if (xPosition > $orangeBox.outerWidth()) {
      winning();
    }
  })
  .bind('mouseleave', function(){
    if($greenBox.outerWidth() < ($orangeBox.outerWidth() - 1)) {
      $greenBox.animate({
        width: "0"
      }, 500);
      $goalPosts.hide();
    }  
  });
});

.orangeBox{
  position:relative;
  display:block;
  height:40px;
  width:100px;
  background:orange;
}
.greenBox {
  position:absolute;
  height:100%;
  top:0;
  left:0;
  background:green;
}
.goalPosts {
  position:absolute;
  display:none;
  height:100%;
  top:0;
  left:100%;
  width:100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="orangeBox">
  <div class="greenBox"></div>
  <div class="goalPosts"></div>
</div>

Answer 2

这是一个非常快速和基本的解决方案，我希望它能帮助ps一点

solution on js fiddle

ps: 应该调整帧率，因为它在快速移动鼠标时失败

Answer 3

Here 是您最简单的工作演示。我相信你可以改进这一点。

solution https://jsfiddle.net/h8w1qxze/

在鼠标移动时用颜色填充容器

on mouse move fill container with color

html

javascript

css

jquery

mouseover