最有效的方法來使用懸停在圖像效果

Question

我知道如何回答我的問題，我只是張貼，看看是否有更好的方式來做我已經做的事情。

假設我正在製作一個銷售4種不同類型海報的網站。我希望用戶連續看到每個海報。當他們將鼠標懸停在每幅圖片上時，圖像將會改變以顯示價格以及海報的尺寸。

我如何做到這一點：

<ul> 
<li> image link here using onmouseover and onmouseout for hover over effects </li> 
<li> same as above </li> 
<li> same as above </li> 
<li> same as above </li> 
</ul 

然後我風格的列表中刪除子彈和水平排列的。現在，這是我的問題...我目前使用onmouseover和onmouseout懸停效果因爲你需要2張圖片才能實現這個目標，所以你需要大量的數據，特別是如果你打算爲網格25張圖片的藝術作品。

這是一個不好的方法來獲得懸停效果？我假設，因爲我是網絡開發的新手，任何可以扔到網頁上的東西都會變得粗糙而且效率不高。

Answer 1

您可以在<li>的另一個div中包含您想要的信息。讓這個絕對定位在圖像上，然後使用opacity在懸停上顯示它。

Demo

HTML

<ul> 
    <li><img src="http://placehold.it/350x150" alt="" /><div class="info">Info here</div></li> 
    <li><img src="http://placehold.it/350x150" alt="" /><div class="info">Info here</div></li> 
    <li><img src="http://placehold.it/350x150" alt="" /><div class="info">Info here</div></li> 
</ul> 

CSS

ul,li { 
    list-style: none; 
} 

li { 
    display: inline-block; 
    position: relative; 
    z-index: 1; 
} 
img { 
    display: block; 
} 

.info { 
    opacity: 0; 
    color: white; 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    width: 100%; 
    z-index: 2; 
    background: red; 
    .transition(opacity 0.5s ease); 
} 

li:hover .info { 
    opacity: 1; 
} 

Answer 2

我爲你們舉個例子:)

您可以display: inline-block;

行 .image彼此相鄰

Have a fiddle!

HTML

<div class="image"> 
    <img src="http://www.placehold.it/200X200" /> 
    <div class="text">Hello</div> 
</div> 

CSS

.image { 
    position: relative; 
    width: 200px; 
    height: 200px; 
} 

.text { 
    display: none; 
} 

img { 
    cursor: pointer; 
} 
img:hover + .text, .text:hover { 
    position: absolute; 
    bottom: 0; 
    height: 50px; 
    background: rgba(0, 0, 0, 0.5); 
    display: block; 
    padding: 10px; 
    width: 180px; 
    cursor: pointer; 
}