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>

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

2 个答案: