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

16年前

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

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

サンプルではテーブルに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

マウスアウト時→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

マウスアウト時→class=”row”

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

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

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

シェア