マウスオーバー時にclassを追加／削除

サンプル

使い方

CSS

.hover_add{
background-color:#333333;
color:#ffffff;
}

マウスオーバー時の振る舞いをCSSに記述します。

サンプルの(x)html

<div id="hover_test">
<p>
id属性「hover_test」があるdivタグ要素の中の、pタグ要素の中に、このテキストを記入しています。この部分をマウスオーバーすると、pタグ要素にclass属性「hover_add」が追加され、マウスアウトすると「hover_add」を取り外します。
</p>
</div>

<p id="hover_test2" class="hover-sample">
ここでは、id属性「hover_test2」があるpタグ要素の中に、このテキストを記入しています。この部分をマウスオーバーすると、pタグ要素にclass属性「hover_add」が追加され、マウスアウトすると「hover_add」を取り外します。
</p>

Javascript（tk1975_config.js への記述例）

function hoverSample(){
var area_id = "hover_test";
var elem = "p";
var class_name = "hover_add";
tk1975_hover(area_id,elem,class_name);
}
prepareOnloadFunction(hoverSample);

• ※area_idは、対象範囲（マウスオーバー時に振る舞いを変更したいタグ要素を取り囲むタグのid名）です。
  elemは、マウスオーバー時に振る舞いを変更したいタグ要素名。
  class_nameは、マウスオーバー時のみにつけるclass名です。
• ※area_idを「var area_id = "";」にすると、対象範囲はbody内すべてになります。また、elemを「var elem = "";」にすると、area_idそのものにclass_nameを付与します。
• ※関数「prepareOnloadFunction」に関しては、「DOM Scriptingを利用する上で知っておくべきこと」を参照してください。

function hoverSample2(){
var area_id = "hover_test2";
var elem = "";
var class_name = "hover_add";
tk1975_hover(area_id,elem,class_name);
}
prepareOnloadFunction(hoverSample2);

思考回路 〜 tk1975_hover(area_id,elem,class_name); の流れ〜

1. マウスオーバーした場合にclass属性を追加し、マウスアウトした場合に追加したclass属性を削除、それだけ。
2. 対象箇所は、a.全てのタグに対して、b.特定のid内に対して、c.特定のid内の特定のタグ要素内に対して、いずれか。

解説 〜 tk1975_hover(area_id,elem,class_name); の詳細〜

Javascript（tk1975.js）

1. function tk1975_hover(area_id,elem,class_name){
2. if(!document.getElementById || !document.getElementsByTagName || class_name == "") return false;レガシーブラウザの場合、もしくはclass_nameの指定がない場合は処理を中止
3. if(area_id == ""){
4. var area = document.getElementsByTagName("body")[0];
5. }else if(!document.getElementById(area_id)){
6. return false;【3-6】area_idの指定がない場合はbody内すべて、area_idがドキュメント内にない場合は処理を中止
7. }else{
8. var area = document.getElementById(area_id);
9. }
10. if(elem == ""){
11. area.onmouseover = function(){
12. addClass(this,class_name);
13. }
14. area.onmouseout = function(){
15. delClass(this,class_name);
16. }
17. }else{
18. var elems = area.getElementsByTagName(elem);
19. for(var i=0; i<elems.length; i++){【20-22】ロールオーバーした時の処理
20. elems[i].onmouseover = function(){
21. addClass(this,class_name);
22. }【23-25】ロールアウトした時の処理
23. elems[i].onmouseout = function(){
24. delClass(this,class_name);
25. }
26. }
27. }
28. }

Javascript（tk1975.js）//クラス属性を作成する

• ※参考：「DOM Scripting 標準ガイドブック 〜やさしく学ぶ、JavaScriptとDOMによるWebデザイン〜」

1. function addClass(element,value){
2. if(!element.className){【3】 elementにclass属性がなかったら
3. element.className = value;
4. }else{【5-8】 elementにclass属性があったら
5. newClassName = element.className;
6. newClassName += " ";
7. newClassName += value;【5-7】 elementのclass属性値に既存のclass属性値名に半角スペース、class「value」を追加
8. element.className = newClassName;【8】 elementのclass属性値をnewClassNameに書き換え
9. }
10. }

Javascript（tk1975.js）//クラス属性を削除する

1. function delClass(element,value){
2. if(!element.className) return false;
3. var class_name = element.className;
4. if(class_name == value){
5. element.className = "";
6. element.removeAttribute("class");【4-6】 elementのclass属性値がvalueのみの場合、class属性を削除
7. }else{
8. var class_name_unit = class_name.split(" ");複数のclass属性値を分割
9. if(class_name_unit[0] == value){削除したいclass属性値が先頭にある場合
10. value = value + " ";
11. element.className = class_name.split(value)[1];
12. }else{削除したいclass属性値が2つ目以降にある場合
13. value = " " + value;
14. element.className = class_name.split(value)[0] + class_name.split(value)[1];
15. }
16. }
17. }

コメント＆トラックバック

この記事に関するご意見・ご感想をお聞かせください

お名前：

コメントNo.1

始めまして。マウスオーバー時にclassを追加／削除をしたくて探してたらたどり着きました。有用な情報ありがとうございます。

で、最初Chromeで見ていたときに上記のサンプルがきちんと動作していたのですが、FF3で見ると、マウスオーバーしても変化が現れません。IE7は見れたので、

○Chome、IE6,7
×Firefox3

という状態です。どちらもWindowsで見ています。そちらではFFでも普通にマウスオーバー時に背景色が変わるでしょうか？こちらでももう少し調べて見ますが、参考まで、よろしくお願いします。

yasuoogle2009年01月19日

コメントNo.2

コメントありがとうございます。
Windows XP の FF3、Windows Vista の FF3で確認しましたが、
ちゃんとサンプルは動作しています。
その他いくつかのマシーンでも確認してみましたが、問題ありませんでした。
う～ん、なんででしょうかねぇ・・・。
よろしかったら、yasuoogleさんのOSの詳細とFF3.以下のバージョンの詳細を教えていただけないでしょうか？
よろしくお願いします。

tk19752009年01月19日

コメントNo.3

早速返信いただてまして、ありがとうございます！
いま再度Firefoxで確認したらちゃんと動いてました！おとといはどうして動かなかったのだろう。。お騒がせして申し訳ありませんでした。。
ぜひ参考にして使ってみたいと思います。ありがとうございます!

yasuoogle2009年01月21日

コメントNo.4

いえいえ、こちらこそ問題なく動いているとのこと、よかったです（なぜ動かなかったのか、気になるとこですが・・・）！！！

tk19752009年01月21日

この記事へのトラックバック

http://search-result.org/mt-tb.cgi/6