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

Posted 2023-05-08

【中文标题】使用 CSS 更改悬停时的链接不透明度

【英文标题】：Change link opacity on hover with CSS

【发布时间】：2017-05-12 07:30:19

【问题描述】：

为什么这不起作用？文本颜色改变，但不透明度不变。

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

【问题讨论】：

正如下面提到的@phpglue，看CSS特异性：developer.mozilla.org/en-US/docs/Web/CSS/Specificity

【参考方案1】：

内联样式会覆盖 CSS。所以摆脱那个 html 样式属性，否则你将不得不使用 javascript。使用外部 CSS 为所有内容设置样式，因此它也可以缓存到用户浏览器中。如果您更改 CSS，请确保更改 src，否则客户端浏览器可能会记住旧的 CSS。

【参考方案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>