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> <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> <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> <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> <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;}
我观察到 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> <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> <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> <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> <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;}