懸停另一張圖片時如何更改一張圖片的CSS？

Question

因此，當我使用html / css懸停時，我打算淡入淡出一個圖像，而淡出另一個圖像。 這些圖像彼此重疊。 一個是透明的播放按鈕（必須在頂部？），另一個是圖片。 懸停時，我希望播放按鈕漸入，圖片逐漸消失。

我已經進行了無數的研究，這是我目前擁有的：

<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中使用〜或+，但沒有一個對我有用。 謝謝您的幫助。

這里是我目前正在使用的鏈接： http : //webdesignog.com

Answer 1

我建議您調整一下您所擁有的。

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

將鼠標懸停在容器上時，其中一張圖像會淡入，另一張圖像會淡出。 如果需要，您應該能夠將所有內容都包裹在錨點中。

Answer 2

不要將.hover效果應用於<img class="playButton">上，而是應用於替代它的<a>標簽上。 您的img看起來不像圖像，而是像鏈接（因為它位於<a>標記中，就像被其隱藏一樣）。 您應該始終使用更多的外部選擇器。