CSSでホバー上のリンク不透明度を変更してください

Question

なぜこれは機能しませんか？テキストの色は変わりますが、不透明度は変わりません。

<style> 
.button:hover{ 
    color: #FFFF00; 
    opacity: 0; 
} 
</style> 

<a href="#" style="position:absolute; opacity: 0.3;background: #000;width:139px;height:150px;top:0;left:0;" class="button"></a> 

https://jsfiddle.net/tmgordon/veL0n4g2/2/

Answer 1

インラインスタイルは、CSSを上書きします。そのHTMLスタイル属性を取り除くか、JavaScriptを使用する必要があります。外部CSSを使用してすべてをスタイルするので、ユーザーのブラウザにもキャッシュされます。 CSSを変更した場合はsrcを変更してください。そうしないと、クライアントブラウザが古いCSSを覚えている可能性があります。

Answer 2

これを試すことができます。

<style>  
.button { 
    opacity: 0.3; 
} 

.button:hover{ 
     color: #FFFF00; 
     opacity: 0; 
    } 
</style> 
<a href="#" style="position:absolute;background: #000;width:139px;height:150px;top:0;left:0;" class="button"></a>