使用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/

- Tom Gordon

---

正如@PHPglue在下面提到的，看一下CSS特异性：https://developer.mozilla.org/zh-CN/docs/Web/CSS/Specificity - johnniebenson

Answer 1

内联样式会覆盖CSS。因此，请删除HTML样式属性，否则您将不得不使用JavaScript。使用外部CSS样式表来设置所有样式，这样它也会被缓存在用户浏览器中。确保在更改CSS时更改src，否则客户端浏览器可能会记住旧的CSS。

- StackSlave

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>

- tam nguyen