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

前回の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>

文字よ変われ〜〜〜!

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

Google AdS



関連記事

IcoMoonにSVGファイルをインポート

IcoMoonでSVGスプライトを作ってSVGアイコンを使う方法:WordPress & html での設定方法


今までSVGアイコンはきちんと把握せず使ってきたので、少々トラブルがあっても『頻繁に使う訳ではないし、とりあえず使えてた…

記事を読む▷


301_re-direct

301リダイレクトでサイトのリニューアル(ドメインを変更)する!:.htaccessの記述、設定方法、順序etc.


最近サーバーの見直し、ドメイン管理会社の見直し、サイト内の見直し等々しているのですが、以前から使用していたサーバー(エク…

記事を読む▷


OPG設定_3

WordPressのプラグインなしで、Jetpackと共存してFacebookやTwitter CardのOGPの設定をする!


先日、ようやく気になっていたOGPの設定を、WP-OGPのプラグインを変更して使えるようにしたのですが(詳細は こちら …

記事を読む▷


複数の横に並ぶブロック要素をセンタリングさせる!!


よく複数の画像をfloatで並べることありますよね?でも、それを括ったDivタグとかをセンタリングしようとしたら、なかな…

記事を読む▷


Database Search and Replace Script in PHP

ドメイン&WordPressを含むサイトの引越しでの、URL変更作業:『DATABASE SEARCH AND REPLACE SCRIPT IN PHP』を使って


最近サーバー移転をして、その時々に起こった問題や注意点を記事にしてましたが(301リダイレクトの記述方法、URLの正規化…

記事を読む▷


Message

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

PAGE TOP