Javascript advanced mouseover

Question

要素のテキストの色を背景と逆にすることは可能でしょうか？
例：

だから、最初の画像は、通常の状態です。 2番目はマウスオーバーの間、最後は完了したマウスオーバーです。
編集：バックグラウンドをスライドさせて、黒いブロックがその背後で「スライド」するたびに各文字の色を変更したい。

Answer 1

からinvertedの幅をリセットします。ここにはexample（OperaとChromeでテスト済み）があります。もちろん、そのようなアプローチにはいくつかの欠点があります。

1. ブラウザはCSS遷移をサポートしている必要があります。
2. 実際の反転ではなく、手動で色を設定する必要があります。
3. 余分なマークアップ。

JavaScriptを使用して2番目と3番目を実行できます（逆の色を計算し、innerHTMLを置き換えます）。

編集： egarcia said in his answerとして、カスタム関数やjQueryを使って幅プロパティをアニメーション化することができますので、最初の欠点は無視することができます。

Answer 2

あなただけの初期状態、mouseoverイベント、およびマウスアウトイベント

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

はEDIT：Erを、私はあなたがプログラムでこれを実行したいと仮定していますので、あなたも「オーバー」状態を変更することなく色を変更することができます？そうでなければ、他の2つの答えが何を言ったか。

Answer 5

JavaScriptを使用すると、3つのグラフィックを作成できます。 1つはデフォルトで、2つ目はOnMouseOverイベントで置き換えられ、3つ目はOnMouseOutイベントで置き換えられます。

Answer 6

余分なマークアップを使用しても問題ない場合は、文字ではなく、ピクセルでで行うことができます。

トリックは2つの要素を作成しています。 1つは「定期的に」表示され、「マウスオーバーはマウスオーバー」と表示されます。また、両方を含むものが必要です。このように：

<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の2つの機能をコーディングすることだけです。

• container.Onmouseoverは、それが完全にnormalを覆う、100％に達するまで徐々にinvertedの幅を増加させる効果を活性化します。 jqueryを使用する場合は、animate functionを使用して1行に作成できます。
• container.OnmouseoutあなたはCSSトランジションでこれを行うことができますバック0