更改覆蓋圖像上懸停的多個圖像/元素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

回答

相關問題