javascript - 位于下方的图像在鼠标悬停时可见

Question

有两张图片一张放在另一张下面，我想做的是当您将鼠标悬停在顶部图片上时，只有下面的图片部分应该可见，而不是要替换的整个图片。这可能使用查询？

我不知道从哪里开始。我尝试在悬停时更改 div 背景，但我无法得到我需要的任何东西。谢谢。

html

<div style="background-image: url("image1.jpg")></div>
<div style="background-image: url("image2.jpg")></div>

Answer 1

试试这个？

$(document).ready(function() {
  var $hover = $("#hover");
  var $foreground = $("#foreground");

  $hover.hide();

  $foreground.mousemove(function(event) {
    var top = event.pageY - $hover.height() / 2;
    var left = event.pageX - $hover.width() / 2;

    $hover.css("top", top);
    $hover.css("left", left);
  });

  $foreground.mouseover(function() {
    $hover.show();
  });

  $foreground.mouseleave(function() {
    $hover.hide();
  });
});

http://jsfiddle.net/WV8jX/685/

编辑:更新为在鼠标进入之前隐藏 http://jsfiddle.net/WV8jX/686/

编辑:如果您需要根据您的描述显示背景，它并不能真正解决您的问题。