javascript - 获取悬停的背景图像

Question

我试图让背景图像在鼠标悬停时发生变化。这部分我正在处理，但由于某种原因，新图像出现在不同的位置。我也不知道让正常图像在悬停时消失。我创建了两个不同的图像来获得我想要的效果。我不确定这是否是正确的方法，但这就是我能想到的。另外，出于某种原因，我无法让 cursor:pointer; 与 `background-image.

一起工作。

我怎样才能让悬停图像与原始图像位于同一位置并完全覆盖它，因此初始图像不会显示，或者删除第一个图像直到不再悬停。

#blue {
  background: blue;
  height: 600px;
  width: 100%;
}
#home-arrow {
  /*height: 100px;*/
  width: 100%;
  position: absolute;
  top: 65%;
  z-index: 99;
  /*cursor: pointer;*/
}
#circle-arrow {
  background-image: url("http://optimumwebdesigns.com/images/circle-arrow.png");
  background-repeat: no-repeat;
  height: 155px;
  width: 300px;
  background-size: 100% 100%;
  margin: auto auto;
  position: relative;
  top: 40%;
}
#home-arrow:hover {
  background-image: url("http://optimumwebdesigns.com/images/circle-arrow-hover.png");
  background-repeat: no-repeat;
  height: 155px;
  width: 300px;
  background-size: 100% 100%;
  margin: auto auto;
  position: relative;
  top: 40%;
}

<div id="blue">
  <div id="home-arrow">
    <div id="circle-arrow"></div>
  </div>
</div>

Answer 1

在您的 css 中的 #home-arrow:hover 选择器之后添加 #circle-arrow，并为背景添加悬停图像，它会为您工作。

#home-arrow:hover #circle-arrow{
    background-image: url("http://optimumwebdesigns.com/images/circle-arrow-hover.png");
}

编辑 1(仅悬停在圆圈上)

如果你只想在圆圈上悬停，那么只需删除 #home-arrow:hover 并将其替换为 #circle-arrow:hover as

#circle-arrow:hover{
        background-image: url("http://optimumwebdesigns.com/images/circle-arrow-hover.png");
    }

如果您将图像裁剪到大约与圆圈一样的宽度，那么这将有助于圆圈悬停。现在，两张图片的左右两侧都有很多空白区域。

EDIT 2(z-index 的一些问题)将 background-position:center 添加到您的 #home-arrow:hover 并删除宽度、高度等:

#home-arrow:hover {
  background-image: url("http://optimumwebdesigns.com/images/circle-arrow-hover.png");
  background-repeat: no-repeat;
   background-position: center; 
  margin: auto auto;
}

See Updated Fiddle Here