如何在懸停其他圖像時更改一幅圖像的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？

回答

相關問題