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>

文字よ変われ〜〜〜!

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



関連記事

スマホ、携帯からタップ(クリック)で電話を発信する、htmlの記述方法 コピペでOK!!


スマホ等のタブレット、また携帯で、電話番号をタップ(クリック)して直接かけるhtmlの記述方法です。 …

記事を読む▷


onMouseOver、onMouseOutで、簡単に画像を切り替える


今までマウスオーバー等で画像を切り替える時は、jQueryを使ったり、cssで画像を重ねてopacityで画像を透過させ…

記事を読む▷


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


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

記事を読む▷


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


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

記事を読む▷


アイキャッチ_RSSImport

WordPress:プラグイン”RSSImport”を使って気になるサイト等の最新情報を表示させる方法


前回はRSSのボタンを自分のサイトに表示させる方法を書いたのですが、今回は自分のサイト以外(勿論自分のものもOK!)の気…

記事を読む▷


GoToTopBG_animation2のgif画像

CSSスプライトで、スムーズに画像を切り替える


マウスオーバーした時などに、画像が上手く切り替わらない時、よくありませんか?ブラウザや、PCの性能によっても変わってくる…

記事を読む▷


サーバー移転の手順 その3:移転後のトラブル


前回、前々回と書きましたが、サーバーの移転、少々、いや、かなりやいこしいです。できたあとは疲れ果てて『もーできたしえーわ…

記事を読む▷


Thumbnail_Icon_firefox_bug

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


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

記事を読む▷


サーバー移転の手順 その1:サーバーからサーバーへの移行(同サーバー(EXTREM)同士)


現在使用しているサーバーが、ここ数ヶ月、アクセスできない状態が頻発するようになりました。 その度にこちらからサーバーへ…

記事を読む▷


backgroundプロパティの正しいショートハンドの書き方


ABCから始めよう!と言いつつ、ちょっとABCからの内容ではないかもしれませんが、今まで貯めてた "?" の解決法で、今…

記事を読む▷


Message

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

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

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

PAGE TOP