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

当播放按钮悬停时，这应该会淡化图像和播放按钮。但它只是淡出了播放按钮，并且没有任何事情发生在视频图像上。是否有可能因为透明播放按钮比视频图像稍微大一点，它根本不影响它，因为它覆盖了它？我的大部分研究都告诉我在我的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>标签中并且就像隐藏它一样）。你应该总是采取更多的外部选择器。

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

2 个答案: