[JS]擬似クラス:hoverをtrに適用するjavascript

IEだと擬似クラスの:hoverがaタグにしか適用されないので、aタグ以外のものに:hoverつけたいときに困ることが多い。
:hoverをつける要素にaタグが入って、それがリストのように1行(ないし1ブロック)しかないのなら、aをブロック要素にすることで回避も可能だ。
でもそれだとtrでtdが2つ3つ並んでる状態になったりすると不可能になる。
というわけで、手っ取り早くいくならやはりjavascriptになると思う。

参考にtrの背景色を:hoverで変更するスクリプトを2つ紹介。

サンプルではテーブルにIDが付いていることと、trにclass名があるというのが前提条件になっている。

<table width="300" border="1" cellspacing="0" cellpadding="0" id="Table">
<tr class="row">
<th>Sample1</th><td>sample text</td>
</tr>
<tr class="row">
<th>Sample2</th><td>sample text</td>
</tr>
<tr class="row">
<th>Sample3</th><td>sample text</td>
</tr>
</table>

スタイルシートで、:hover時のスタイルを設定する。

tr.hover {
	background-color: #cccccc;
	color: #333333;
	cursor:pointer;
}

Sample1
window.onload = function() {
if (document.getElementsByTagName) {
var className = ‘hover’;
var t = document.getElementById(“Table”);
var rows = t.getElementsByTagName(“tr”);
for (var i = 0; i < rows.length; i++) { if (rows[i].className) { rows[i].BaseName = rows[i].className; rows[i].onmouseover = function(){this.className = className;} rows[i].onmouseout = function(){this.className = this.BaseName;} } } } }[/js] Sample1では、TableというIDが付いたtableのtrを全て取得し、trについているクラス名をhoverに変更する。

  • マウスアウト時→class=”row”
  • マウスオーバー時→class=”hover”

クラス名を書き換えることでマウスオーバーの背景色を設定している。

Sample2
window.onload = function() {
if(document.getElementsByTagName) {
var className = ‘hover’;
var pattern = new RegExp(‘(^|\\s+)’ + className + ‘(\\s+|$)’);
var t = document.getElementById(“Table”);
var rows = t.getElementsByTagName(‘tr’);

for(var i = 0, n = rows.length; i < n; ++i) { rows[i].onmouseover = function() { this.className += ' ' + className; }; rows[i].onmouseout = function() { this.className = this.className.replace(pattern, ' '); }; } } }[/js] Sample2では、TableというIDが付いたtableのtrを全て取得し、すでに付いてるクラス名の後にhoverを追加する。

  • マウスアウト時→class=”row”
  • マウスオーバー時→class=”row hover”

クラス名を後ろに追加することでマウスオーバーの背景色を設定している。

スクリプトを変更すれば、ページ内全てのtrとか他のタグにも使えるようになります。

Leave a Comment.