Javascript高级鼠标悬停
有没有可能让元素中的文本颜色与背景反转？
例如：
所以第一个图像是正常状态。第二个是在鼠标悬停期间，最后一个是完成鼠标悬停。
编辑:我想要的背景滑出，每个字符的颜色变化为黑色块“滑动”在它后面。
回答 6
Stack Overflow用户
发布于 2010-12-07 01:35:54
您可以使用CSS转换来实现这一点。这是一个example (在歌剧和Chrome上测试过)。当然，这种方法有几个缺点：
- 浏览器必须支持CSS transitions.
- It's而不是真正的倒置，你必须设置颜色manually.
- Extra
- 。
不过，第二个和第三个可以用JavaScript (计算反转颜色并替换innerHTML)来完成。
编辑：作为egarcia said in his answer，您可以使用自定义函数或jQuery对宽度属性进行动画处理，因此第一个缺点可以忽略不计。
Stack Overflow用户
发布于 2010-12-07 01:16:29
如果你可以使用额外的标记，你可以不是按字符，而是按像素。
诀窍是创建两个元素；一个将“定期”显示和“鼠标悬停/鼠标悬停”。您还需要包含这两者的内容。如下所示：
<div id='container'>
<div id='normal' >Home</div>
<div id='inverted' style='width:0;'>Home</div>
</div>容器必须具有position: relative (或绝对)
比如说，normal跨度应该是黑色和白色背景，反转的应该是相反的颜色。
此外，必须绝对定位inverted div，并设置位置，使其左上角与normal重合(可能为0,0)。inverted必须具有overflow: hidden。注意html本身的显式style='width:0;'。
#container { position: relative; }
#normal {
color: black;
background-color: white;
}
#inversed {
color: white;
background-color: black;
position: absolute;
overflow: hidden;
top: 0; /* modify top/bottom if needed */
bottom: 0;
}现在您唯一需要做的就是编写两个函数: onmouseover和onmouseout。
- container.Onmouseover会激活一个效果，它会逐渐增加
inverted的宽度，直到它达到100%，完全覆盖normal。如果你使用jquery，你可以在一行中创建它，使用animate function. - container.Onmouseout会将
inverted的宽度重置为0。
Stack Overflow用户
发布于 2010-12-07 00:41:58
您将只有初始状态、mouseover事件和mouseout事件
<div id="item" class="default" onmouseover="this.className='over'" onmouseout='this.className='out'"></div>或者确保一旦你可以尝试这样做，就会发生这种情况
<div id="item" class="default" onmouseover="Over(this)" onmouseout="Out(this)">Home</div>
<script type="text/javascript">
function Over(obj)
{ if (obj.className == "default") obj.className = "over"; }
function Out(ojb)
{ if (obj.className == "over") obj.className = "out"; }
</script>并且这些css类中的每一个都将具有反转样式
https://stackoverflow.com/questions/4372368
复制
![JavaScript高级知识总结（高级篇）[通俗易懂]](https://ask.qcloudimg.com/http-save/yehe-8223537/34af2a47a0ccb2cdd79e4260dee783b3.png)
相似问题
javascript JSON高级
JavaScript鼠标悬停
Javascript数组。高级
高级javascript指南
JavaScript、高级.replace()
领取专属 10元无门槛券
AI混元助手 在线答疑
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
