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>
いけました？よね？
たま〜にしか使わないでしょうけど、是非使ってみてください！
- ◀PREV
前の記事
- onMouseOver、onMouseOutで、簡単に画像を切り替える
- NEXT▶
次の記事 - wordmark.it でフォントを選ぶ方法
関連記事
-
WP-OGPの設定方法：WPの投稿記事のサムネイルをFBできちんと表示させる
この記事は前回からの続きなのですが、、、実は1年経ってます。。下書きを途中まで書いてたのですが、あまりにも大変で途中で終…
-
サーバー移転の手順 その3：移転後のトラブル
前回、前々回と書きましたが、サーバーの移転、少々、いや、かなりやいこしいです。できたあとは疲れ果てて『もーできたしえーわ…
-
サーバー移転の手順 その2：データベースの移行（phpMyAdminを使って）
前回サーバ移転の手順 その1：サーバーからサーバーへの移行（同サーバー(EXTREM)同士）からの続きです！ って…
-
Firefoxでなぜか消える、Tableのborder対策、cssのみでの解決法
Firefoxでなぜか消えてしまうTableのborder、いつもじゃなく、たまになのでこれがやっかい。。原因がわからな…
-
複数の横に並ぶブロック要素をセンタリングさせる！！
よく複数の画像をfloatで並べることありますよね？でも、それを括ったDivタグとかをセンタリングしようとしたら、なかな…
