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

我创建了一个notecard图像，其中我在其上覆盖了多个图像。这些是记录卡的元素。我需要它，以便当我将鼠标悬停在记事卡上时，我可以完全更改记事卡图像上的内容（将新内容叠加到记事卡上）。更改覆盖图像上悬停的多个图像/元素HTML

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

<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变成了“徘徊”的版本，但我无法改变任何东西。我需要它，只要鼠标指针位于记事卡中（包括记录卡内的其他元素），内容就会改变。我想完全删除它的内容（所以标题和图标），并改变它，所以我可以添加文字和覆盖新的图像。

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

来源

2013-06-05 user2457563

您正在查找的JavaScript事件是'onmouseover'。你可以在[w3schools]（http://www.w3schools.com/jsref/event_onmouseover.asp）上阅读。 – ChrisP

这只能帮助我将一个图像更改为另一个。我需要更改多个元素并添加/减去元素。 – user2457563

可能是css和js的组合，取决于你想要去的复杂程度。一个小而随意的例子，它可以用jquery完成一些功能强大而又简单的事情：http://jsfiddle.net/9eLC6/ – Pevara

如果你正在努力实现这样的事情： 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-05 22:09:47 Learner

想想一张纸（这是一张图片）。在那张纸上，有2张图片叠加在上面。当鼠标悬停在它上面时，它会发生变化，因此该纸张的内容现在在顶部叠加4个图像，并在纸张上显示（或叠加在纸张图像的顶部）。我该如何操作？ – user2457563

对不起，还没有得到它。任何现场示例或原型可用？ – 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

来源

2013-06-05 22:24:18 ChrisP

如果两个版本（悬停/非悬停）有显著不同的（并且要无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元素，但可能会更容易维护。

来源

2013-06-05 23:02:54

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

回答

相关问题