Javascript advanced mouseover

Would it be possible to have the colour of text in an element to be inverted of the background?

eg:

So the first ima开发者_高级运维ge is the normal state. the second is during the mouseover, and the last is the finished mouseover.

Edit: i want the background to slide out, and the colour of each character to change as the black block "slides" behind it.

You can do this with CSS transitions. Here's an example (tested in Opera and Chrome). Of course there are several drawbacks in such approach:

1. Browser must support CSS transitions.
2. It's not the real invert, you have to set colors manually.
3. Extra markup.

Though, second and third one could be done with JavaScript (calculate inverted colors and replace innerHTML).

Edit: As egarcia said in his answer, you can animate width property with custom function or jQuery, so the first drawback could be neglected.

If you are ok with using extra markup, you can do it not by character, but by pixel.

The trick is creating two elements; one that will be shown 'regularly' and the 'mousing over/mouse over'. You would also need something containing them both. Like this:

<div id='container'>
 <div id='normal' >Home</div>
 <div id='inverted' style='width:0;'>Home</div>
</div>

The container must have position: relative (or absolute)

The normal span would have, say, black color and white background, and the inverted should have the opposite colors.

In addition, the inverted div must be absolutely positioned, with position set up so its top-left corner coincides with normal (possibly 0,0). inverted must have overflow: hidden. Notice the explicit style='width:0;' on the html itself.

#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;
}

Now the only thing that you need is to code two functions: onmouseover and onmouseout.

• container.Onmouseover will activate an effect that gradually increases inverted's width until it reaches 100%, covering normal completely. If you use jquery, you can create that in one line, with the animate function.
• container.Onmouseout will reset inverted's width back to 0.

you would just have the initial state, a mouseover event, and a mouseout event

<div id="item" class="default" onmouseover="this.className='over'" onmouseout='this.className='out'"></div>

or to ensure this happens once you could try this

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

and each of those css classes would have the inversion styles

Not with the animation. Best you could do is change each character's colour as the animation progressed from left to right, but it would probably look janky.

Though you could do the invert itself with CSS alone (and skip the animation).

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


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

Neat-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. is a snippet of a forum thread I've taken for your answer, but it makes sense.

And straight from that forum, too:

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

EDIT: Er, I'm assuming you want to do this programmatically, so you can change the colour without having to also alter an 'over' state? Otherwise yes, what the other 2 answers said.

You could do this with JavaScript by having 3 graphics. One the default, the second replaced in the OnMouseOver event and the third replaced in the OnMouseOut event.