悬停另一张图片时如何更改一张图片的CSS？答案

【问题标题】：How to change the CSS of one image when hovering another image?悬停另一张图片时如何更改一张图片的CSS？
【发布时间】：2013-03-31 06:35:36
【问题描述】：

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

【问题讨论】：

使用 jquery 是一种选择吗？它包含用于在对象上悬停/单击交叉淡入淡出的现有方法。
我不希望深入研究 jQuery 并将其实现到每个帖子中。但如果这是最后的手段，那我会试试的。
如果你想保留当前的 HTML 标记，你不能用 CSS 做到这一点。
您也可以查看theberrics.com/dailyops 的工作示例
他在那个例子中使用了很多 jQuery。

标签： html css image opacity fade

【解决方案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;
}

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

【讨论】：

谢谢。这非常接近我想要的，但仍然不是。此代码当前仅显示播放按钮。悬停时，它会淡出播放按钮并淡入图片图像。
我需要通过更改 css 不透明度值来反转。但我真正需要的是同时显示图像和播放按钮。然后一旦悬停，图片几乎一直淡出但不完全淡出，播放按钮完全淡入
没关系。现在一切都解决了。我只是简单地在播放按钮上添加了一个 z-index 并使用 opacity 0.25 让它们不会完全消失。再次感谢！
完全没有意义，尝试使用jQ

【解决方案2】：

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

【讨论】：