使用CSS在悬停时更改链接不透明度

时间:2016-12-28 03:10:25

标签: css hyperlink hover opacity

为什么这不起作用?文本颜色会更改,但不透明度不会更改。

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

2 个答案:

答案 0 :(得分:1)

内联样式覆盖CSS。因此,摆脱HTML样式属性或者您必须使用JavaScript。使用外部CSS设置样式,因此它也会缓存到用户浏览器中。如果更改CSS,请确保更改src,或者客户端浏览器可能记住旧的CSS。

答案 1 :(得分:0)

你可以试试这个。

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