CSS Link/Hover 不工作

Question

我有一个 link，它应该在 'regular' 和悬停时显示白色，在活动时显示浅蓝色。

但 'regular' 显示紫色。为什么？

  .button {
  text-decoration:none; 
  color: red; 
  background: purple; 
  }
  .button:hover {
  color: white; 
  background: purple; 
  }
  .button:active {
  color: red; 
  background: purple;
  }
  .button:visited {
  color: purple; 
  background: purple; 
  }

<a href="example.com" style="text-decoration:none" class="button">text</a>

HTML:

<a href="example.com" style="text-decoration:none" class="button">text</a>

CSS:

<style>
  .button {
  text-decoration:none; 
  color: red; 
  background: purple; 
  }
  .button:hover {
  color: white; 
  background: purple; 
  }
  .button:active {
  color: red; 
  background: purple;
  }
  .button:visited {
  color: purple; 
  background: purple; 
  }
</style>

Answer 1

如果 .button 是一个 <A> 标签，因为您的 CSS 建议您可能希望为 "visited" 伪 class.[=15 提供样式=]

参见：http://www.w3.org/wiki/CSS/Selectors/pseudo-classes/:visited

附加信息

CSS 的级联性质意味着样式的顺序很重要。
一旦 URL 被访问，":visited" 样式将适用。
当您将鼠标悬停在 link 上时，这些样式也将适用。
它们应用的优先级将取决于它们在您的样式中的顺序 sheet.

Note: If you want ":hover" to be dominant (even after visited happens, it should be defined below :visited.

CSS Link/Hover 不工作

CSS Link/Hover Not Working

css

button

hover