HTML href - 悬停不系统

HTML href - Hover not systematic

我观察到 html href 属性的奇怪行为:

尽管为此定义了 CSS 选择器,但当光标悬停时,我的某些 link 会显示颜色。

当我插入一个 http link 时,我在左下角 (Mozilla Firefox) 的浏览器预览每次都是 https。

我知道这看起来很奇怪而且是一个非常基本的问题,但我从来没有注意到这样的行为。我错过了什么?

这是一个演示

dt{font-family:'Muli',sans-serif;font-size:14px;}
A:link {color: #1c1c1c;text-decoration:none;}
A:hover {color: #3d62e7;}
A:visited {color: #1c1c1c;text-decoration:none;}
<link rel='stylesheet' href="https://fonts.googleapis.com/css?family=Muli">

<DT>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<A target="_blank" HREF="http://www.discogs.com/fr/Eric-B-Rakim-Let-The-Rhythm-Hit-Em/master/13184">01 - Blue when hover, no problem</A>
<DT>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<A target="_blank" HREF="http://www.discogs.com/fr/Eric-B-Rakim-Dont-Sweat-The-Technique/master/13419">02 - No specific color when hover</A>
<DT>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<A target="_blank" HREF="http://www.discogs.com/fr/A-Tribe-Called-Quest-Midnight-Marauders/master/45947">03 - No specific color when hover</A>
<DT>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<A target="_blank" HREF="http://www.discogs.com/fr/A-Tribe-Called-Quest-We-Got-It-From-Here-Thank-You-4-Your-Service/master/1092073">04 - Blue when hover, no problem</A>

查看您访问过的链接的样式:

A:visited {color: #1c1c1c;text-decoration:none;}

我敢打赌,您没有看到变色的链接是您已经访问过的链接。

我可以确认此行为(在 Chrome 中)。一旦我访问了您示例中的链接之一,它就不再以 hover 样式做出反应。

您声明规则的顺序很重要。您可以通过更改规则的顺序并将 :hover 放在 :visited 之后来使 :hover 状态优先:

A:link {color: #1c1c1c;text-decoration:none;}
A:visited {color: #1c1c1c;text-decoration:none;}
A:hover {color: #3d62e7;}