label タグの LABEL:hover が IE では動作しない

label タグって form の利便性を上げるナイスなタグがあって、

LABEL:hover {
    color:          red;
}

とかって CSS を書くと、マウスオーバーすると赤くハイライトして激しく便利なんだけど、悲しいことにこれは IE では機能しません。なのでこんな JavaScript を書いて、onLoad で hilight_labels(); したりすると IE でもマウスオーバーでテキストが赤くなります。

function hilight_labels() {
    var labels = document.getElementsByTagName('label');
    for ( var i = 0; i < labels.length; i++ ) {
        var label = labels[i];

        if ( label.attachEvent ) { // only IE
            label.attachEvent('onmouseover', label_over);
            label.attachEvent('onmouseout',  label_out);
        }
    }
}

function label_over(e) {
    var target = e.srcElement;
    target.style.color = "#ff0000";
}

function label_out(e) {
    var target = e.srcElement;
    target.style.color = "";
}

上のコードは IE でしか動作しないので( 厳密には知らないけど firefox だと label.attachEvent が失敗する ) firefox だと何も起こらない。なので CSS と JavaScript 両方使っておけば IE でも firefox でも同じような挙動になる。

他にも IE は暗黙的な label タグを許容しなかったりするので for="id" が必要(input タグにも id が必要)だったりとか、面倒臭い。

http://www.kanzaki.com/docs/html/htminfo33.html
もっとすばらしいドキュメントがここにあります。