最有效的方法来使用悬停在图像效果

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