设置:访问链接到相同的状态作为:链接和a:悬停

9 css hyperlink

我正在研究一个想法,我的a:链接有一个状态(蓝色,没有下划线等),aa:悬停为白色.我希望我访问过的链接具有相同的状态a:linka:hover.这可能吗?大多数常见浏览器都支持?

phi*_*hag 15

a, a:link, a:hover, a:visited, a:active {text-decoration: none; color: blue;}
Run Code Online (Sandbox Code Playgroud)

应该适用于所有支持CSS的浏览器,虽然这是一个坏主意(目前处于离线状态,Google Cache)

要制作a:hover白色,请将其从上述规则中删除并为其制定特殊规则或仅添加:

a:hover {color: white !important;}
Run Code Online (Sandbox Code Playgroud)


Zac*_*man 11

正如sblundy指出的那样,这是完全可能的.但是,如果您制定类似规则,则不再有任何视觉提示,用户将鼠标悬停在之前访问过的链接上.

另外,请记住按此顺序指定规则:

a:link { }
a:visited { }
a:hover { }
a:active { }
Run Code Online (Sandbox Code Playgroud)

否则,您可能会出现意外结果,因为所有这些规则具有相同的特异性.订单很重要.

编辑:CSS2允许将伪类链接在一起.这可用于修复您的请求创建的[潜在]可用性问题.

a:visited:hover { }
Run Code Online (Sandbox Code Playgroud)

但是,我不知道这个公约是否得到广泛支持.


One*_*yon 5

这个助记符我被教导要记住将你的CSS链接放入哪个命令是"LoVe HAte":链接,访问,悬停,活动.

坚持:专注于通常也不是一个坏主意.

当然,如果您通过使用逗号列出选择器来使链接的所有状态看起来相同,那么顺序无关紧要.


Mar*_*eau 1

以下是如何分别设置 a 标签(正常和已访问)的样式以及悬停的样式。

a
{
    color:#6c7492;
    font-weight:bold;
    text-decoration:none;
}
a:hover
{
    border-bottom:1px solid #6c7492;
}
Run Code Online (Sandbox Code Playgroud)