Изменить непрозрачность ссылок при наведении с помощью 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, поэтому он также кэшируется в браузере пользователей. Убедитесь, что вы изменили src, если вы изменили свой CSS, или браузер клиентов может помнить старый 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>