悬停时不透明不起作用

所以，我试图在将光标悬停在其上时将图像更改为不透明。问题是改变不透明度根本不起作用。悬停时不透明不起作用

下面是代码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

悬停时不透明不起作用

回答

相关问题