0

所以我很想在使用 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

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

当您将鼠标悬停在容器上时，其中一个图像会淡入，而另一个会淡出。如果需要，您应该能够将任何东西包裹在锚中。

于 2013-04-09T01:52:06.537 回答
0

不要将.hover效果应用到你的<img class="playButton">，而是应用在它周围的<a>标签上。您的 img 不像图像，而是像一个链接（因为它在<a>标签中，就像被它隐藏了一样）。您应该始终采用更外部的选择器。

于 2013-04-09T06:54:36.677 回答