Javascript高级鼠标悬停

Question

有没有可能让元素中的文本颜色与背景反转？

例如：

​

所以第一个图像是正常状态。第二个是在鼠标悬停期间，最后一个是完成鼠标悬停。

编辑:我想要的背景滑出，每个字符的颜色变化为黑色块“滑动”在它后面。

Answer 1

您可以使用CSS转换来实现这一点。这是一个example (在歌剧和Chrome上测试过)。当然，这种方法有几个缺点：

1. 浏览器必须支持CSS transitions.
2. It's而不是真正的倒置，你必须设置颜色manually.
3. Extra
   1. 。

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

编辑：作为egarcia said in his answer，您可以使用自定义函数或jQuery对宽度属性进行动画处理，因此第一个缺点可以忽略不计。

Answer 2

如果你可以使用额外的标记，你可以不是按字符，而是按像素。

诀窍是创建两个元素；一个将“定期”显示和“鼠标悬停/鼠标悬停”。您还需要包含这两者的内容。如下所示：

<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。

Answer 3

您将只有初始状态、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类中的每一个都将具有反转样式