如何在悬停其他图像时更改一幅图像的CSS？

所以我tyring淡入一个图像和其他出在使用HTML/CSS徘徊。这些图像坐在彼此的顶部。一个是透明的播放按钮（它必须位于顶部？）另一个是图片。当盘旋时，我希望播放按钮淡入，图片淡出。如何在悬停其他图像时更改一幅图像的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

来源

2013-04-09 max nichols

也在使用jQuery的选择吗？它包含用于悬停/点击对象上的交叉淡入淡出的现有方法。 – flacnut 2013-04-09 01:09:04

我不想深入研究jQuery并将其应用到每篇文章中。但如果它是最后的手段，那么我会尝试。 – 2013-04-09 01:14:20

如果您想保留当前的HTML标记，那么您无法使用CSS来做到这一点。 – 2013-04-09 01:16:49

我建议调整自己拥有什么。

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-09 01:52:06 Jared

感谢，这是非常接近我想要什么，但仍然没有它。该代码目前显示的唯一的播放按钮。当盘旋，它则身家播放按钮并 – 2013-04-09 04:55:13

我需要通过更改css不透明度值来反转，但我实际需要的是同时显示图像和播放按钮，然后一旦徘徊，图像几乎全部淡出方式，但不compl etetely和播放按钮完全消失 – 2013-04-09 04:56:36

没关系。现在一切都是固定的。我只是简单地向播放按钮添加了一个z-index，并使用不透明度0.25来使它们不完全消失。再次感谢！ – 2013-04-09 05:01:36

请勿在您的<img class="playButton">上应用.hover效果，但会在<a>标签上应用该效果。你的img不像图像，但像链接（因为它是在<a>标签，它就像隐藏它）。你应该总是采取更多的外部选择器。

来源

2013-04-09 06:54:36 Djouuuuh

如何在悬停其他图像时更改一幅图像的CSS？

回答

相关问题