是否可以让元素中的文本颜色与背景颜色相反?
例如:
所以第一张图片是正常状态。第二个是在鼠标悬停期间,最后一个是完成的鼠标悬停。
编辑:我希望背景滑出,并且每个字符的颜色随着黑色 block 在它后面“滑动”而改变。
最佳答案
您可以使用 CSS 过渡来做到这一点。这是一个 example (在 Opera 和 Chrome 中测试过)。当然,这种方法有几个缺点:
- 浏览器必须支持 CSS 转换。
- 这不是真正的反转,您必须手动设置颜色。
- 额外标记。
不过,第二个和第三个可以用 JavaScript 完成(计算反转颜色并替换 innerHTML)。
编辑: 作为egarcia said in his answer ,您可以使用自定义函数或 jQuery 为宽度属性设置动画,因此可以忽略第一个缺点。
关于Javascript 高级鼠标悬停,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4372368/