Javascript 高级鼠标悬停

Question

是否可以让元素中的文本颜色与背景颜色相反？
例如:

所以第一张图片是正常状态。第二个是在鼠标悬停期间，最后一个是完成的鼠标悬停。
编辑:我希望背景滑出，并且每个字符的颜色随着黑色 block 在它后面“滑动”而改变。

Answer 1

您可以使用 CSS 过渡来做到这一点。这是一个 example (在 Opera 和 Chrome 中测试过)。当然，这种方法有几个缺点:

1. 浏览器必须支持 CSS 转换。
2. 这不是真正的反转，您必须手动设置颜色。
3. 额外标记。

不过，第二个和第三个可以用 JavaScript 完成(计算反转颜色并替换 innerHTML)。

编辑:作为egarcia said in his answer ，您可以使用自定义函数或 jQuery 为宽度属性设置动画，因此可以忽略第一个缺点。