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并不总能做到他们应该做的事情。这真让我感到困惑，因为如果我将blue a:hover's中的color: blue;更改为black，它会突然发挥作用。

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

Answer 1

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

Answer 2

需要考虑的一些事项：

要使a:link生效，您必须包含实际链接（href="somewebsite"）。否则，您应该只定位a。
很多人认为active状态是在你点击它之后因此使它“活跃”但它是在mousedown。单击链接并按住鼠标以查看:active已触发
在您的示例中，您将a:link和a:hover设置为蓝色，这样当您将鼠标悬停在其上时，您将看不到任何更改。
text-decoration: dotted不是属性。您可以选择none，underline，overline，line-through，initial和inherit

EXAMPLE

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;
}

CSS a：悬停和a：活动不起作用

2 个答案: