onMouseOver、onMouseOutで、簡単にテキストを切り替える！
- 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>
いけました？よね？
たま〜にしか使わないでしょうけど、是非使ってみてください！
Google AdS
- ◀PREV
前の記事
- onMouseOver、onMouseOutで、簡単に画像を切り替える
- NEXT▶
次の記事
- wordmark.it でフォントを選ぶ方法
関連記事
-
-
＜head＞タグの記述例＝順番等もきちんと考えた雛形（テンプレート）
一度サイトを作ってしまうと、あまり見直すことのないheadタグ内の記述。新たなLPを作ったりする時でも、以前作ったものの…
-
-
Facebookでシェアした記事のサムネイル画像がおかしい時、表示されない時の解決方法
せっかく面白そうなネタを見つけたので、早速Wordpressに記事を投稿！でもいざFBでシェアしようとしたら、サムネイル…
-
-
【2026最新】スマホ・タブレットの解像度一覧表（画面サイズの割合）iPhone・iPad..
2026/4「解像度一覧表」 更新 フロントエンド（デザイナーやコーダー）の方にとって見やすい表にしています。…
-
-
サーバー移転の手順 その3：移転後のトラブル
前回、前々回と書きましたが、サーバーの移転、少々、いや、かなりやいこしいです。できたあとは疲れ果てて『もーできたしえーわ…
-
-
WPでin_categoryが効かない！サイドバーが出てこない！原因と対処（解決）方法
管理しているサイトでカテゴリー単位で色々「in_category」で分岐してサイドバーの出し分けをしていたのですが、ある…
