懸停時不透明不起作用

所以，我試圖在將光標懸停在其上時將圖像更改爲不透明。問題是改變不透明度根本不起作用。懸停時不透明不起作用

下面是代碼CSS

.jarleby { 
    z-index: 10001; 
    position: fixed; 
    left: 43%; 
    top: 60%; 
    margin-left: -45px; 
    margin-top: -56px; 
    animation-delay: 0.3s; 
    opacity: 0.5; 
    filter: alpha(opacity=50); /* For IE8 and earlier */ 
} 

.jarleby:hover { 
    opacity: 1.0; 
    filter: alpha(opacity=100); /* For IE8 and earlier */ 
}

HTML

<div class="jarleby animated fadeInUp"> 
    <a href="https://steamcommunity.com/profiles/76561198345955002" target="_blank"><img src="img/steam.png"></img> </a> 
</div>

來源

2017-05-14 sebbejar

別的東西正在採取優先。使用！重要或排除你的規則 – Michael

請'動畫'代碼 – AvrilAlejandro

您的代碼有效。 https://codepen.io/anon/pen/YVvwzG一定要給我們一個實際上覆制你的問題的[mcve]，否則我們所能做的只是猜測。 –

別的東西可能會被推翻你的CSS代碼。嘗試在:hover部分中將!important添加到opacity: 1;的規則中。見下面的例子：

.jarleby:hover { 
    opacity: 1 !important; 
}

來源

2017-05-14 19:17:13 Deathstorm

.jarleby { 
 
    z-index: 10001; 
 
    position: fixed; 
 
    left: 43%; 
 
    top: 60%; 
 
    margin-left: -45px; 
 
    margin-top: -56px; 
 
    animation-delay: 0.3s; 
 
    opacity: 0.5 !important; 
 
    filter: alpha(opacity=50); /* For IE8 and earlier */ 
 
    } 
 
    
 
.jarleby:hover { 
 
    opacity: 1.0 !important; 
 
    filter: alpha(opacity=100); /* For IE8 and earlier */ 
 
}

<div class="jarleby animated fadeInUp"> 
 
    <a href="https://steamcommunity.com/profiles/76561198345955002" target="_blank"> 
 
    <img src="http://placehold.it/350x150"/> 
 
    </a> 
 
</div>

來源

2017-05-14 19:26:10 amarnath

該代碼片段在Chrome v49.x中針對OS X 10.7, – www139

按預期運行奇怪的是，當我運行代碼片段但它在我的代碼中不起作用時，它工作正常。我也嘗試添加！重要的;但沒有結果。 – sebbejar

發現了什麼是無效的，這是animate.css – sebbejar

懸停時不透明不起作用

回答

相關問題