onMouseOver、onMouseOutで、簡単にテキストを切り替える！

• 2014/10/30
• 2013/09/22
• HowTo, Webデザインテクニック

前回のonMouseOver,onMouseOutで簡単に画像を切り替える！の続き、応用編です。

実はこちらサイトのそれぞれの記事の下にある、『☆ 続きを読む』って部分を、マウスオーバーした時に、文字を変えてちょっと変わった感じにしてみたくなったんですね。でもそんなこと今までした事なかったので『どうすんのこれ。できるんかな？』って『？』がでてきたわけなんですね。

みなさんの中にも「使ってそうで今まで全くそんな事してないわ。画像ならあるけど。」って方、結構多いんじゃないです？
僕はテキスト自体をマウスオーバーで切り替えれるって事自体、考えもしなかったのですが、結論。思ったよりも簡単にできました。トラブルもちょいとありましたが。

ってなわけで、今回はこの『？』についてです。

で、まず最初に辿り着いた書き方はこんな感じでした。

<a href="#"><span onmouseover="this.innerText='文字が変わった！！！！！'" onmouseout="this.innerText='文字よ変われ〜〜〜！'">文字よ変われ〜〜〜！</span></a>

文字よ変われ〜〜〜！

変わりました？変わらない方います？よね？
変わらなかった方、Firefox使ってるでしょ？
フフフ。なんでもお見通しなのです。なんて。。

はい。この書き方ではFirefoxでは動きません。
なんでやん。。って感じだったのですが、このinnerTextプロパティは、元々IEの独自拡張で、追随して実装したブラウザもあったようですが（chrome,safari等）、Firefoxでは実装されなかったので、使用できないようなのです。

ってことで、その対策といいますか、IEの独自拡張であるinnerHTMLプロパティであれば問題ないとの事なので、innerHTMLプロパティを使って書けば問題なし。こんな感じになります。

<a href="#"><span onmouseover="this.innerHTML='文字が変わった！！！！！'" onmouseout="this.innerHTML='文字よ変われ〜〜〜！'">文字よ変われ〜〜〜！</span></a>

文字よ変われ〜〜〜！

いけました？よね？
たま〜にしか使わないでしょうけど、是非使ってみてください！