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

All examples of image swap on hover using the opacity value I've read about use one image in its own div. Is it at all possible with CSS to have three images in a row in the same div, and set a background image for each of them separately, that would separately change opacity on hover and thus visually change the image? The background and foreground images I have in mind are the same size.

使用我读过的不透明度值悬停时图像交换的所有示例都在其自己的div中使用一个图像。是否可以使用CSS在同一个div中连续三个图像,并分别为每个图像设置一个背景图像,这将分别改变悬停时的不透明度,从而直观地改变图像?我想到的背景和前景图像大小相同。

Basic three link-images in a row is what I have. I want to set a background image for each of them that would change on hover.

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

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

UPDATE:

Would you know why my images are not showing up when I use Preben's method?

你知道为什么我使用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);}

What am I missing? I'm not using float in my mixnav div as I have everything centered, and not using sizes as I specify them in imageX css as you described (they are of slightly different widths). The images simply don't appear.

我错过了什么?我没有在我的mixnav div中使用float,因为我将所有内容都集中在一起,并且不使用大小,因为我在imageX css中指定它们(如你所描述的那样)(它们的宽度略有不同)。图像根本不会出现。

1 个解决方案

#1

This is may be the most easy way. This way you set the images in one place (CSS file), and also easily add specific width to each image:

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

I have set a <a> ... </a> and use CSS to tell it to act as a block and give it a width and height. Then I use CSS to give it a background image, and then a css that tells it to show another image on hover.

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

The effect will be better by using a pre-loader of the hover-images, but I hope you het the idea.

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

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

See example fiddle: http://jsfiddle.net/Preben/exc8snpx/

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

For transitions add this to the css: see Fiddle: http://jsfiddle.net/Preben/exc8snpx/3/

对于转换,将此添加到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;
}

To avoid having a "blink" you may use image sprites or use a preloader script.

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