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

LINEで送る
Pocket

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

文字よ変われ〜〜〜!

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



関連記事

『WinSCP』をMacで使えるようにする方法!!


FTPソフトの中では、やはり『WinSCP』が一番使いやすいです。でも、Macでは普通には使えません。。FileZill…

記事を読む▷


RSSフィードを設置してすぐにエラーが…


恥ずかしながら、RSSフィードを管理している全てのサイトに設置していませんでした。やろうやろう。とは思ってたのですが、ど…

記事を読む▷


WordPressでGIFアニメが動かない時の対処法


今回アイキャッチ画像にGIFアニメを登録したのですが、登録時、また、メディアライブラリ内ではしっかりGIFアニメとして動…

記事を読む▷


WP-OGPの設定方法:WPの投稿記事のサムネイルをFBできちんと表示させる


この記事は前回からの続きなのですが、、、実は1年経ってます。。下書きを途中まで書いてたのですが、あまりにも大変で途中で終…

記事を読む▷


Thumbnail_Icon_firefox_bug

Firefoxでなぜか消える、Tableのborder対策、cssのみでの解決法


Firefoxでなぜか消えてしまうTableのborder、いつもじゃなく、たまになのでこれがやっかい。。原因がわからな…

記事を読む▷


z-index が効かない時の対処方法


z-index が効かない時がちょくちょくあります。でも、仕事でそういう場合に遭遇すると、その場しのぎで対処法を見つけて…

記事を読む▷


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


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

記事を読む▷


OPG設定_3

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


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

記事を読む▷


お名前.comで “Whois情報公開代行” の設定にチェックを入れ忘れて登録した時の対処方法


先日、こちら で少し書いたのですが、お名前.comでドメインを取った時に、 "Whois情報公開代行" の設定にチェック…

記事を読む▷


WordPress:特定カテゴリで投稿を古い順に表示させる方法


Wordpressの投稿の表示は、デフォルトでは新しいものから表示されますよね。でも特定カテゴリーでは反対(投稿した順番…

記事を読む▷


Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

参考にさせていただいてるサイト

PAGE TOP