在同一个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来告诉它作为一个块并给它一个宽度和高度。然后我用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");}

参见示例小提琴：http://jsfiddle.net/Preben/exc8snpx/

对于过渡将此添加到css：请参阅小提琴：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;
}

为避免“闪烁”，您可以使用图像精灵或使用预加载器脚本。