css - 将不透明图像悬停在更多图像上，分别在同一个 div 中？

Question

所有使用不透明度值悬停时图像交换的示例我都读过关于在其自己的 div 中使用一个图像。 CSS 是否有可能在同一个 div 中连续放置三个图像，并分别为每个图像设置背景图像，这会在悬停时分别改变不透明度，从而在视觉上改变图像？我想到的背景和前景图像大小相同。

基本的连续三个链接图像就是我所拥有的。我想为它们中的每一个设置一个在悬停时会改变的背景图像。

<div id="mixnav"> 
<a href="psychill-mixes.html"><img src="images/logo-psychill-final2.png" width="375" height="331" alt="psychill mixes" /></a>

<a href="goa-psy-mixes.html"><img src="images/logo-goa-final2.png" width="393" height="331" alt="goa psy mixes" /></a>

<a href="other-mixes.html"><img src="images/logo-other-final.png" width="364" height="331" alt="other mixes" /></a>
</div>

更新:

你知道为什么当我使用 Preben 的方法时我的图像不显示吗？

HTML:

<div id="mixnav"> 
<a id="psychillimg" href="psychill-mixes.html"></a>
<a id="goaimg" href="goa-psy-mixes.html"></a>
<a id="otherimg" href="other-mixes.html"></a>
</div>

CSS:

#mixnav {
margin-top: 75px;
margin-bottom: 80px;
display:block;
}

#psychillimg{background-image: url(images/logo-psychill-final2.png/375/331/psychill);}
#psychillimg:hover{background-image: url(images/logo-psychill-hover2.png/375/331/psychill);}
#goaimg{background-image: url(images/logo-goa-final2.png/393/331/goapsy);}
#goaimg:hover{background-image: url(images/logo-goa-hover2.png/393/331/goapsy);}
#otherimg{background-image: url(images/logo-other-final.png/364/331/other);}
#otherimg:hover{background-image: url(images/logo-other-hover.png/364/331/other);}

我错过了什么？我没有在我的 mixnav div 中使用 float ，因为我将所有内容都居中，并且没有使用我在 imageX css 中指定的大小，如您所述(它们的宽度略有不同)。图像根本不会出现。

Answer 1

这可能是最简单的方法。通过这种方式，您可以在一个地方(CSS 文件)设置图像，还可以轻松地为每个图像添加特定宽度:

我设置了一个<a> ... </a>并使用 CSS 告诉它作为一个 block 并给它一个宽度和高度。然后我使用 CSS 给它一个背景图像，然后一个 css 告诉它在悬停时显示另一个图像。

如果使用悬停图像的预加载器，效果会更好，但我希望你有这个想法。

<div class="wrapper">
    <a class="image1" href="#1"></a>
    <a class="image2" href="#2"></a>
    <a class="image3" href="#3"></a>
</div>

CSS:

/*same height and width for images - OR you can add special sizes in the imageX css*/
.wrapper a {display:block;height:331px;width:175px;float:left;}


.image1{background-image: url("http://lorempixel.com/175/331/city");}
.image1:hover{background-image:url("http://lorempixel.com/175/331/animals");}
.image2{background-image: url("http://lorempixel.com/175/331/people");}
.image2:hover{background-image:url("http://lorempixel.com/175/331/transport");}
.image3{background-image: url("http://lorempixel.com/175/331/fashion");}
.image3:hover{background-image:url("http://lorempixel.com/175/331/cats");}

参见示例 fiddle :http://jsfiddle.net/Preben/exc8snpx/

对于 transitions 将此添加到 css: 参见 Fiddle:http://jsfiddle.net/Preben/exc8snpx/3/

.wrapper a {
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

为避免“眨眼”，您可以使用图像 Sprite 或使用预加载器脚本。