更改多个图像/元素悬停在覆盖的图像HTML

Change multiple images/elements on hover for overlayed images HTML

本文关键字：图像 覆盖 HTML 悬停 元素      更新时间：2023-09-26

我创建了一个记事卡图像，我在上面叠加了多个图像。这些是卡片的元素。我希望当我将鼠标悬停在记事卡上时，我可以完全改变记事卡图像上的内容(将新内容覆盖到记事卡上)。

现在，我有这个:

<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>

记事卡变成"悬停"版本，但我无法更改其他任何内容。我希望每当鼠标指针在notecard中(包括在notecard中的其他元素上)时，内容都会发生变化。我想完全废弃它的内容(所以标题和图标)，并改变它，所以我可以添加文本和覆盖新的图像。

如何在JS/HTML/etc中做到这一点?

如果两个版本(悬停/非悬停)明显不同(并且你想要一个无js的解决方案)，你可以有两个div，一组隐藏，一组显示。然后悬停，你改变他们的可见度。小提琴。

<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元素，但可能更容易维护。

根据你对学习者的回答的评论，这里有一个你正在描述的想法的例子:

HTML: 

<div class="outer">
    <div class="inner"></div>
    <div class="inner"></div>
    <div class="inner"></div>
    <div class="inner"></div>
</div>
CSS: 

.outer {
    width: 304px;
    height: 304px;
    background-color: black;
}
.inner {
    float: left;
    width: 150px;
    height: 150px;
    background-color: red;
    border: 1px solid black;
    display: none;
}
.outer:hover .inner {
    display: block;
}
演示

如果你想实现这样的东西:http://spoonfedproject.com/wp-content/uploads/demo/jquery-slide-hover/index.htm

这是你的解决方案:http://www.robertkuzma.com/2011/01/jquery-animated-swap-div-content-on-hover-effect/

相关文章：