CSS背景顏色無法在懸停狀態下工作

當我將鼠標懸停在圖像上時，播放按鈕顯示以及background-color和opacity的.youTubeVideo發生更改。CSS背景顏色無法在懸停狀態下工作

但是，當您將鼠標懸停在播放按鈕上時，不會發生這種情況。如何將鼠標懸停在播放按鈕上時，background-color和opacity的.youTubeVideo發生更改？

.youTubeVideo:hover { 
 
    opacity: 0.5; 
 
    background-color: green; 
 
} 
 
.videoThum:hover { 
 
    background-color: green; 
 
    background-image: url("http://s24.postimg.org/k69rptjk1/play_button.jpg"); 
 
    background-position: center top; 
 
    background-repeat: no-repeat; 
 
    background-size: 100% 100%; 
 
}

<div class="col-3"> 
 
    <div class="videoThum"> 
 
    <a href="javascript:;" rel="https://www.youtube.com/embed/OSgvYZpO2xY" class="youTubeVideo"> 
 
     <img src="http://s8.postimg.org/jf407d2xh/saina_nehwal_syed.png" /> 
 
    </a> 
 
    </div> 
 
    <div class="caption"><a href="#"><h2>2015 Syed Modi International</h2></a> 
 
    <a href="#"> 
 
     <p>2015 Syed Modi International India Masters SF [WS]</p> 
 
    </a> 
 
    </div> 
 
</div>

DEMO

來源

2015-05-20 pcs

你確定嗎？ http://jsfiddle.net/eyz3gsuj/1/ – panther

可能是你的圖像coverd整個背景。這就是爲什麼你無法看到背景顏色。看起來你的'背景大小：100％100％'覆蓋整個區域。 –

我是唯一一個沒有工作的小提琴嗎？ – connexo

你的背景圖像覆蓋整個元素。

看到這個修改fiddle與background-size改爲看到問題。解決此

一種方法是使用具有透明度或pseudo元素png圖像與position:absolute

見CSS: set background image with opacity?

來源

2015-05-20 08:57:50 AmmarCSE

，但我問的背景顏色和圖像..謝謝 – pcs

的問題是，當你將鼠標懸停在的.videoThum右邊你不再徘徊超過.youTubeVideo所以.youTubeVideo:hover不會生效。

由於.videoThum包含.youTubeVideo可以觸發改變.youTubeVideo時.videoThum代替徘徊通過改變.youTubeVideo:hover到.videoThum:hover .youTubeVideo。

.videoThum:hover { 
 
    background-color: green; 
 
    background-image: url("http://s24.postimg.org/k69rptjk1/play_button.jpg"); 
 
    background-position: center top; 
 
    background-repeat: no-repeat; 
 
    background-size: 100% 100%; 
 
} 
 
.videoThum:hover .youTubeVideo { 
 
    opacity: 0.5; 
 
    background-color: green; 
 
}

<div class="col-3"> 
 
    <div class="videoThum"> 
 
    <a href="javascript:;" rel="https://www.youtube.com/embed/OSgvYZpO2xY" class="youTubeVideo"> 
 
     <img src="http://s8.postimg.org/jf407d2xh/saina_nehwal_syed.png" /> 
 
    </a> 
 
    </div> 
 
    <div class="caption"><a href="#"><h2>2015 Syed Modi International</h2></a> 
 
    <a href="#"> 
 
     <p>2015 Syed Modi International India Masters SF [WS]</p> 
 
    </a> 
 
    </div> 
 
</div>

JS小提琴：http://jsfiddle.net/bq9rgzap/

來源

2015-05-20 09:01:02

thsi不是我的問題的解決方案，謝謝.. – pcs

@saina在這種情況下，請檢查我的編輯您的問題，因爲它可能不完全是你以後。您可能需要將其回滾或用額外信息進行編輯。請你能澄清我的答案到底是不是符合你的標準？ –

@saina這是你在追求什麼？ http://jsfiddle.net/u3d46nmm/ –

CSS背景顏色無法在懸停狀態下工作

回答

相關問題