How to change the CSS of one image when hovering another image?

问题

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>

And here is my 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;
   }

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

回答1:

I suggest tweaking what you have.

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.

回答2:

Do not apply the .hover effect on your <img class="playButton"> but on the <a> tag that surronds it. Your img is not seen like an image but like a link (because it is IN the <a> tag and it is like hidden by it). You should always take the more external selector.

来源：https://stackoverflow.com/questions/15891633/how-to-change-the-css-of-one-image-when-hovering-another-image

标签

html

css

image

opacity

fade