Question

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

我被困在哪里开始。我尝试在悬停时更改div背景，但我无法接近我需要的任何地方。谢谢。

tracts <- format(na.omit(df$CensusTract), width = 5, nsmall = 2, decimal.mark ="", na.encode = FALSE, trim = TRUE)
mygeo <- geo.make(state=17,county=31,tract=c(tracts))
race <- acs.fetch(endyear=2014, span=5, geography = mygeo, table.number="B03002", dataset = "acs", col.names="pretty", expressions = 100000)

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/

修改如果你需要根据你的描述显示背景，它并没有真正解决你的问题。

Answer 2

由于您已标记jQuery，请使用jQuery .hover（）。

示例：

$("selector").hover(
  function() {
    show your hidden image functionality here
  }
);

https://api.jquery.com/hover/

Answer 3

我认为不需要使用Javascript / Jquery。 CSS可以完成以下工作

<强> HTML

<div class="bgdemo"></div>

<强> CSS

.bgdemo{
     background-image: url("image1.jpg");
}

.bgdemo:hover{
         background-image: url("image2.jpg");
    }

并且HTML中存在拼写错误，样式标记未正确结束。

修改

选中此jsfiddle，根据您的要求定位背景。

修改

在这里我发现好article似乎有点复杂，但值得一读......

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

3 个答案: