0

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

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

<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 中做到这一点？

4

3 回答 3

1

根据您对学习者回答的评论，以下是您所描述的想法的一个示例：

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

演示

于 2013-06-05T22:24:18.113 回答
1

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

于 2013-06-05T23:02:54.243 回答
0

如果您试图实现这样的目标： 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/

于 2013-06-05T22:09:47.563 回答