Modifier l'opacité du lien sur hover avec CSS

Question

Pourquoi cela ne fonctionne-t-il pas? La couleur du texte change, mais pas l'opacité.

<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

Les styles en ligne remplacent CSS. Donc, débarrassez-vous de cet attribut de style HTML ou vous devrez utiliser JavaScript. Style tout avec CSS externe, de sorte qu'il est également mis en cache dans le navigateur des utilisateurs. Assurez-vous de changer le src si vous changez votre CSS, ou le navigateur des clients peut se souvenir de l'ancienne CSS.

Answer 2

Vous pouvez essayer ceci.

<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>