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>

文字よ変われ〜〜〜!

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



関連記事

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


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

記事を読む▷


Thumbnail_Icon_firefox_bug

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


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

記事を読む▷


日付を自動更新で表示させる! 簡単コピペ!!


先週『日付を毎月変えるの邪魔くさいし、サイトに書いてる日付とってくれへんやろか?』という依頼がありました。 とって…

記事を読む▷


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


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

記事を読む▷


URLwwwありなし

URLの正規化:wwwあり、なしのドメインを統一する記述方法(エックスサーバー(XSERVER) にて)


前回のブログ で.htaccessに301リダイレクトをするための記述方法について書きましたが、ついでにwwwあり、なし…

記事を読む▷


no image

テキスト、画像を選択できなくする方法


facebookで『続きを読みたかったらいいねを教えてね!』みたいな記事がよくありますが、必ずそういう記事に限ってコピペ…

記事を読む▷


opacityの書き方 クロスブラウザ


今までも書いてましたが、ほんとIE嫌い。 そして、これからもまた同じ事書くでしょう。 さて。クロスブラウザでIE…

記事を読む▷


画像やテキストを中央(上下左右真ん中)に配置する方法


普通にtext-align:center;や、margin:0 auto;等でテキストや写真を真ん中に配置したつもりでも…

記事を読む▷


Database Search and Replace Script in PHP

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


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

記事を読む▷


お名前.com から脱出する!:ドメインの移管方法


『お名前.com』でドメイン取得してからは、『Whois情報公開代行』の件(詳細はこちら)で大変な思いをしたのですが、そ…

記事を読む▷


Message

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

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

Error: Feed has an error or is not valid

PAGE TOP