淡化链接悬停不起作用

Posted 2023-03-06

【中文标题】淡化链接悬停不起作用

【英文标题】：Fade link hover not working

【发布时间】：2015-05-16 13:22:25

【问题描述】：

我使用以下方法创建了一个淡化链接悬停：

 a:link color:#333333; text-decoration: none;
-o-transition:.5s; 
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
 transition:.5s; 
a:visited color:#FF0033; text-decoration: none;
a:hover color:#000000; text-decoration: none;
a:active color:#FF0033; text-decoration: none;
a:focus outline-style: none;

我使用 Wordpress，我的网站为不同的链接设置了不同的颜色（例如颜色 A 的菜单、颜色 B 的类别链接、颜色 C 的标题等）

由于某些奇怪的原因，淡入淡出的悬停对于类别链接（例如灰色框中的“Conciertos”）工作得非常好，但对于其余链接却不能正常工作。它会进行某种缓慢的悬停。 请查看flamencosrosas.com 了解我的意思。 有人可以帮忙吗？

非常感谢！

【问题讨论】：

这很奇怪，但我只是将“a:link”颜色和“a:visited”颜色更改为相同颜色“FF0033”，它现在可以在我使用的两个浏览器上运行， Firefox 和 Chrome。

【参考方案1】：

您应该指定要转换的内容，因此：

 a color:#FF0033; text-decoration: none;
-o-transition: color .5s; 
-ms-transition: color .5s;
-moz-transition: color .5s;
-webkit-transition: color .5s;
 transition: color s; 
a:visited color:#FF0033; 
a:hover color:#000000; 
a:active color:#FF0033; 
a:focus outline-style: none;

Fiddle here，我已将过渡设置为 1，以便它们更明显。

另外，你的意思是链接默认为#333333？ #333333 和 #000000 之间的过渡非常轻微，您可能只是没有注意到过渡的发生。