0

そのため、html/cssを使用してホバーすると、一方の画像をフェードインし、もう一方の画像をフェードアウトするのに苦労しています。これらの画像は互いに重なり合っています。1 つは透明な再生ボタン (一番上にある必要がありますか?) で、もう 1 つは画像です。ホバーすると、再生ボタンがフェードインし、画像がフェードアウトします。

私は数え切れないほどの調査を行いましたが、現在私が持っているものは次のとおりです。

<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

4

2 に答える 2

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

コンテナの上にカーソルを置くと、画像の 1 つがフェードインし、もう 1 つがフェードアウトします。必要に応じて、何でもアンカーでラップできるはずです。

于 2013-04-09T01:52:06.537 に答える
0

.hover効果は自分<img class="playButton">ではなく、周囲の<a>タグに適用してください。あなたのimgは画像のようには見えませんが、リンクのように見えます（<a>タグの中にあり、それによって隠されているためです）. より外部のセレクターを常に使用する必要があります。

于 2013-04-09T06:54:36.677 に答える