javascript - 在悬停时更改多个图像/元素以覆盖图像 HTML

Question

我创建了一个记事卡图像，我在上面叠加了多个图像。这些是记事卡的元素。我想要它，以便当我将鼠标悬停在记事卡上时，我可以完全更改记事卡图像上的内容(将新内容叠加到记事卡上)。

所以现在，我现在有这个:

<div style="position:relative;">
    <a href="#games">
        <img id "image_a" a" src="images/card_normal.png" onmouseover "this.src rc 'images/hover/card_hover.png';" ;" onmouseout "this.src rc 'images/card_normal.png';" ;" style="position: absolute; top: 0; left: 0;"/>
        <img id "image_b" b" src="images/category_icons/icon_games.png" style="position: absolute; top: 10px; left: 40px;"/>
        <img id "image_c" c" src="images/category_titles/title_games.png" style="position: absolute; top: 160px; left: 40px;"/>
    </a>
</div>

记事卡变为“悬停”版本，但我无法更改任何其他内容。我想要它，以便只要鼠标指针位于记事卡中(包括它是否位于记事卡内的其他元素上)，内容就会发生变化。我想完全废弃它的内容(因此标题和图标)并更改它以便我可以添加文本和覆盖新图像。

我如何在 JS/HTML/等中做到这一点？

Answer 1

如果两个版本(悬停/非悬停)明显不同(并且您想要一个无 js 解决方案)，您可以有两个 div，一组隐藏，一组显示。然后在悬停时，您可以更改他们的可见性。 Fiddle .

<div class="card">
  <div class="no-hover">
    stuff you want to show when the user is just looking
  </div>
  <div class="on-hover">
    stuff you want to show when the user hovers
  </div>
</div>

CSS:

.no-hover {
  display: block;
}
.on-hover {
  display: none;
}
.card:hover > .on-hover {
  display: block;
}
.card:hover > .no-hover {
  display: none;
}

它是额外的 HTML 元素，但可能更易于维护。