CSS a:悬停和 a:active 不起作用

Question

我刚刚开始学习HTML和CSS，当奇怪的事情开始发生时，我正在测试一些简单的CSS。

这是我的CSS.

a:link {
    color: blue;
    text-decoration: none;
}
a:visited {
    color: purple;
    text-decoration: dotted;
}
a:hover {
    color: blue;
    text-decoration: dotted;
}
a:active {
    color: blue;
    text-decoration: dotted;
}

a:hover和a:active并不总是做他们应该做的事情。这真的让我感到困惑，因为如果我将a:hover's color: blue;中的blue更改为black它就会突然起作用。

我正在Visual Studio 2012中编辑HTML和CSS文件，并在Google Chrome中从保存它们的Dropbox文件夹中打开它们。

Answer 1

如何区分a:link和a:hover？通常，它是蓝色的a:link。现在，当你将鼠标悬停在它上面时，它a:hover也是蓝色的。将a:hover更改为黑色将使您看到差异。

Answer 2

需要考虑的几件事：

1. 为了使a:link正常工作，您必须包含一个实际的链接（href="somewebsite"）。否则，您应该只针对a。
2. 很多人认为active状态是在你点击它之后，从而使它"活跃"，但它是在鼠标按下时。单击链接并按住鼠标以查看触发的:active
3. 在您的示例中，您将a:link AND a:hover设置为蓝色，因此当您将鼠标悬停在其上时不会看到任何变化。
4. text-decoration: dotted不是财产。您可以选择none、underline、overline、line-through、initial和inherit

例

a:link {
  color: black;
  text-decoration: none;
}
a:visited {
  color: purple;
}
a:hover {
  color: green;
  text-decoration: underline;
}
a:active {
  color: red;
  text-decoration: line-through;
}