Question

我有一个<img>我希望能够将鼠标悬停在上面，当它悬停在它上面时，我可以动画或淡入div或文本以显示各种信息。显示的信息将叠加在图像上我之前在网站上看到过这种情况，我记不起来或放在我看过的地方，但我的想法非常明确。

对不起，我没有任何好的尝试，我已经读过，找不到任何适用于我的想法。

我还没有完全理解JS，但我可以想到一些想法让它发挥作用。在我尝试自己做其余的事情之前，我只需要一些帮助就能让我朝着正确的方向前进。

我的第一个想法是直接删除图像，然后将其替换为在background-image中具有文本覆盖它的图像的div。

document.getElementById("imageBox").onmouseover = function() {
    imageMouseOver()};
var image = document.getElementById("imageBox");
var textHere = imagine a lot of html here;
function imageMouseOver() {
    document.getElementById("imageBox").parentNode.removeChild(image);
    document.getElementById("imageBox").add(textHere);
};

以上不起作用，我的其他想法将基于最初的想法，例如： - 不是删除图像，减少图像的不透明度，并在其上添加一些东西来模拟该效果 - 或者，opacity:0到实际的叠加层以隐藏它，onmouseover，只是让它显示为opacity:1，也许transition: opacity 200ms ease？

对不起，我在这里要求太多了，但我几乎无能为力，从哪里开始，有人可以帮我指点一下吗？理想情况下，一些例子会很好，或者一个解释它的网站会很棒！

Answer 1

以下是使用:hover到transition文本元素的opacity的CSS示例。

.wrap {
  display: inline-block;
  position: relative;
  padding: 1em;
  background: #fff;
  box-shadow: 0 2px 3px rgba(0,0,0,0.5);
}
.text {
  background: rgba(0,0,0,0.8);
  color: #fff;
  transition: opacity .5s;
  opacity: 0;
  position: absolute;
  top: 1em; bottom: 1em; left: 1em; right: 1em;
  display: flex;
  justify-content: center;
  align-items: center;
}
.wrap:hover .text {
  opacity: 1;
}
img {
  max-width: 100%;
  display: block;
}

<div class="wrap">
  <img src="http://kenwheeler.github.io/slick/img/fonz1.png">
  <div class="text">text overlay</div>
</div>

将鼠标悬停在图像

1 个答案: