html – CSS选择器a：link：悬停

我正在尝试创建我的网站,以便您可以通过每个div中元素的颜色来判断您的位置.该网站只有一个页面,我点击打开该部分时使用jQuery滑出网站的各个部分(而不是单独的.html).

为了向他们展示他们打开了哪个部分,我将每个部分中的所有链接都与打开该部分的文本颜色相同.但是我也想要< a> < / A>不是链接的标签,可以为网站添加一些颜色,并吸引观众到关键的信息位.出于这个原因,我想只将链接效果应用于< a> < / A>标签实际上是链接…所以我试过这个：

#Box1 a{
    color: #68cff2;
}

#Box1 a:link:hover{
    color: #ffffff;
    background-color: #68cff2;
}

这适用于背景颜色,因为它只会改变< a>的背景颜色. < / a>有一个href =“…”,但它不会改变这些链接的字体颜色…有什么方法可以对此进行排序吗？

最佳答案

：link伪类仅适用于未访问的链接,而不是所有链接.请记住,您也访问过帐户的链接.您可能需要为访问过的链接重复选择器,因为我注意到您还没有这样做：

#Box1 a:link:hover,#Box1 a:visited:hover {
    color: #ffffff;
    background-color: #68cff2;
}

(或者只是使用#Box1 a [href]：hover,more info)

不过,我应该补充一点,你不应该使用< a>用于标记非链接且不用作锚点的标记的标记,仅用于“为网站添加一些颜色并吸引观看者获取关键信息”.这不是他们的设计目标.更具语义性的替代方案将类似于< em>或者< strong>,当然如果你不想要它,你必须删除斜体或粗体样式：

#Box1 a,#Box1 em {
    font-style: normal;
    color: #68cff2;
}

#Box1 a:hover{
    color: #ffffff;
    background-color: #68cff2;
}

然后你不需要指定：link和：visited伪类,因为你基本上可以保证你剩下的所有< a>元素是链接.

相关文章