JavaScript高级鼠标悬停

Question

将元素中的文本颜色与背景相反是否可能？
例如：

所以第一图像是正常状态。第二个是在鼠标悬停期间，最后一个是完成的鼠标悬停。
编辑：我想让背景滑出，每个角色的颜色随着黑色块在它后面“滑动”而改变。

Answer 1

你可以用CSS过渡做到这一点。这里有一个example（在Opera和Chrome中测试）。当然这种方法有几个缺点：

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

虽然，第二个和第三个可以使用JavaScript（计算反转颜色并替换innerHTML）来完成。

编辑： 作为egarcia said in his answer，你可以动画width属性自定义函数或jQuery的，所以第一个缺点可以忽略不计。

Answer 2

你只拥有初始状态，鼠标悬停事件，和鼠标移出事件

<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类的将具有反转样式

Answer 3

不适用于动画。你可以做的最好的事情就是在动画从左到右进行时改变每个角色的颜色，但它可能看起来很帅。

虽然你可以单独使用CSS进行反转（并跳过动画）。

a { 
    background: #000; 
    color: #fff; 
} 


a:hover { 
    background: #fff; 
    color: #000; 
} 

Answer 4

整齐-O，In conclusion I think you must split in 3, convert each in decimal, substract each from 255, and if you want hexa by all means, convert each back in hexa, reasamble and adding # to the result string.是一个论坛主题我已经采取了你的答案的一个片段，但它是有道理的。

而且直接从该论坛，也：

<script language="JavaScript" type="text/JavaScript"> 
function bla(){ 
var b = document.getElementsByTagName('body')[0]; 
var bg = b.style.backgroundColor; 
alert('the present background is '+b.style.backgroundColor) 
alert('the present background will be change into inversed RGB color') 
var oldCol = bg.split('(')[1].split(')')[0].split(','); 
var newCol = new Array() 
for(var i=0;i<oldCol.length;i++){ 
newCol[i] = 255-Number(oldCol[i]); 
} 
b.style.backgroundColor = 'rgb('+newCol[0]+','+newCol[1]+','+newCol[2]+')'; 
alert('the new background is '+b.style.backgroundColor) 
} 
onload=bla 
</script> 

编辑：呃，我假设你想以编程方式做到这一点，所以你可以改变颜色，而无需另外改变的“过度”状态？否则，是的，其他2个答案是什么意思。

Answer 5

你可以用3个图形来做到这一点。默认情况下，第二个替换为OnMouseOver事件，第三个替换为OnMouseOut事件。

Answer 6

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

诀窍是创建两个元素;一个会'定期'显示和'鼠标悬停/鼠标悬停'。你也需要包含它们的东西。就像这样：

<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将激活，直到它达到100％，覆盖normal完全逐渐增加inverted的宽度的效果。如果你使用jQuery，你可以在一行中创建animate function。
• container.Onmouseout将inverted的宽度重置回0