在HTML中，如何以全新的形象將基本影像，當我翻滾我的鼠標我的基本圖像，使得兩個圖像並排顯示

Question

我想提出一個漫畫網頁，有2部動畫片。當一個用戶在一個卡通移動他的舉動，我需要的是對話/頭腦想到的漫畫應該出現在頁面

任何人都可以幫我???

Answer 1

像這樣的事情？

img { 
 
    max-width: 100%; 
 
} 
 
.image { 
 
    position: relative; 
 
    display: inline-block; 
 
    width: 300px; 
 
} 
 
.image .dialog-image { 
 
    opacity: 0; 
 
    transition: opacity 300ms; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 10px; 
 
    width: 100px; 
 
} 
 
.image:hover .dialog-image { 
 
    opacity: 1; 
 
}

<div class="image"> 
 
    <img src="http://www.jamiesale-cartoonist.com/wp-content/uploads/cartoon-duck-free.png" alt=""> 
 
    <div class="dialog-image"> 
 
    <img src="https://d30y9cdsu7xlg0.cloudfront.net/png/23875-200.png" alt=""> 
 
    </div> 
 
</div>

Answer 2

給你的對話框類（前「對話」。），然後加入這個CSS：

.dialog{ 
    position:absolute; 
    z-index:2; 
    display:none; 
} 

.dialog:hover{ 
    display:block; 
} 

position:absolute;如果得到的畫面頂部的對話 - 你找出基於定位你周圍的HTML