Change link opacity on hover with CSS

Question

Why doesn't this work? The text color changes, but the opacity does not.

<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

Inline styles override CSS. So get rid of that HTML style attribute or you'll have to use JavaScript. Style everything with external CSS, so it gets cached into the users Browser as well. Make sure you change the src if you change your CSS, or the Clients Browser may remember the old CSS.

Answer 2

You can try this.

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