如何在悬停另一个图像时更改一个图像的CSS？

问题描述

所以我'm着褪色一个图像，另一个出来时hover使用html / css。
这些图像坐在彼此的顶部。一个是透明的播放按钮（必须在顶部？）另一个是图片。

So I'm tyring to fade one image in and the other out when hovered using html/css.These images sit on top of each other. One is a transparent play button (which has to be on top?) And the other is a picture. When hovered, I want the play button to fade in and the picture to fade out.

我做了无数的研究，这里是我目前有的：

I have done countless research and here is what I currently have:

<div id="videocontainer">
  <a href="#"><img class="playButton" onclick="do something" src="imagesrc" alt="" /></a>
  <img class = "vidImage" src="imagesrc" alt=""/>
</div>

这里是我的css

    #videocontainer
    {
      position: relative;
      width: 760px;
      height:400px;
    }

    .playButton
    {
      z-index: 500;
      position: absolute; top: 0; left: 0;
      width:760px;
      height:400px;
    }

    .vidImage
    {
       position: relative;
       top: 0;
       left: 0;
    }

   .playButton:hover ~ .vidImage
   {
     -webkit-opacity: 0.25;
     -moz-opacity: 0.25;
     opacity: 0.25;
     -webkit-transition: all 3s ease;
     -moz-transition: all 3s ease;
     -ms-transition: all 3s ease;
     -o-transition: all 3s ease;
      transition: all 3s ease
   }


   .playButton:hover
   {
     -webkit-opacity: 0.25;
     -moz-opacity: 0.25;
     opacity: 0.25;
     -webkit-transition: all 3s ease;
     -moz-transition: all 3s ease;
     -ms-transition: all 3s ease;
     -o-transition: all 3s ease;
      transition: all 3s ease;
   }

当播放按钮徘徊时，这应该会淡化图像和播放按钮。但它只是淡出的播放按钮，没有发生任何事情的vidimage。可能是因为透明播放按钮比视频图像大一点，它不会影响它在所有因为它覆盖它？我的大部分研究告诉我在我的CSS中使用〜或+，但没有一个为我工作。感谢您的帮助。

This should fade both the image and the play button when the play button is hovered. But it is only fading out the play button and nothing is happening to the vidimage. Is it possible that because the transparent play button is a little bigger than the video image, that its not affecting it at all because its covering it? Most of my research tells me to use ~ or + in my CSS but none have worked for me. Thanks for the help.

以下是我目前使用的链接：

Here is a link to what I currently am working with: http://webdesignog.com

推荐答案

我建议调整您的功能。

HTML：

<div id="container">
   <img src="play.jpg" alt="Play Image" class="play" />
   <img src="picture.jpg" alt="Picture Image" class="picture" />
</div>

CSS：

#container {
   width: 200px;
   height: 200px;
   position: relative;
}

#container IMG {
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
   -webkit-transition: all 3s ease;
   -moz-transition: all 3s ease;
   -ms-transition: all 3s ease;
   -o-transition: all 3s ease;
   transition: all 3s ease;
}

#container IMG.play {
   opacity: 1;
}

#container IMG.picture {
   opacity: 0;
}

#container:hover IMG.play {
   opacity: 0;
}

#container:hover IMG.picture {
   opacity: 1;
}

当您将鼠标悬停在容器上时，其中一个图像淡入，淡出。如果需要，你应该可以在锚中包装任何东西。

When you hover over the container, one of the images fades in and the other fades out. You should be able to wrap anything in anchors if you need to.

这篇关于如何在悬停另一个图像时更改一个图像的CSS？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！