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>