html - 我希望鼠标悬停时背景为黑色，文本为白色，鼠标移出时背景为白色，文本为黑色

Question

我找到了这个很棒的教程http://tympanus.net/codrops/2011/07/12/animated-text-and-icon-menu/

我遇到了一些事情：

例如，我希望鼠标悬停时背景为黑色，文本为白色，鼠标移出时背景为白色，文本为黑色。我怎样才能做到这一点？

因为每次我尝试在鼠标悬停时更改背景颜色时，文本都会在鼠标移出时获得相同的背景颜色。

感谢大家 ：）

Answer 1

尝试这个：

<a class="my_link" href="#">Link</a>

CSS

.my_link {
  color: black;
  background-color: white;
}

.my_link:hover {
  color: white;
  background-color: black;
}

演示：http: //jsfiddle.net/YXPFh/

Answer 2

<div class='your-class'>content</div>
<style type="text/css">
.your-class {
  color: black;
  background-color: white;
}
.your-class:hover {
 /* new rules */
}
</style>