Advanced Javascript Manipulation

Question

Is it possible to have the text color in an element that needs to be flipped from the background?
eg:

So, the first image is a normal state. the second is during the mouse, and the last is the completed mouseover.
Edit: I want the background to slide, and the color of each character changes when the black block “slides” behind it.

Answer 1

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

• The browser must support CSS transitions.
• This is not a real invert, you need to manually set the colors.
• .

, JavaScript ( innerHTML).

Edit: egarcia , jQuery, .

Answer 2

, , .

; , "" " ". , . :

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

position: relative ( )

normal , , , .

, div inverted , , normal (, 0,0). inverted overflow: hidden. style='width:0;' html.

#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.
• container.Onmouseout reset 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

Answer 4

. , , , , , , .

CSS ( ).

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


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

Answer 5

Neat-o, , 3, , 255, , hexa , hexa, reasamble # . - , , .

:

<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 assume you want to do this programmatically, so that you can change the color without changing the state “on top” as well? Otherwise, yes, the other 2 answers said.

Answer 6

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