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 / etc中执行此操作？

Answer 1

根据您对Learner答案的评论，以下是您所描述的想法的示例：

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

DEMO

Answer 2

如果两个版本（悬停/非悬停）明显不同（并且你想要一个no-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元素，但可能更容易维护。

Answer 3

如果你想要达到这样的目标： 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/

在悬停时更改多个图像/元素以用于叠加图像HTML

3 个答案: