6

ユーザーのマウスが最初に言及されたtdの上に移動したときに、tdの背景を灰色に変更して別のtdのテキストに変更する必要があります。

私はこれまでにこれを行いました：

<td onMouseOver="this.style.background='#f1f1f1'" onMouseOut="this.style.background='white'">

ただし、これは最初のtdの背景を変更するだけで、2番目のtdのテキストは変更しません。

何かアイデアはありますか？

4

2 に答える 2

10

これを見てください：

function highlightNext(element, color) {
    var next = element;
    do { // find next td node
        next = next.nextSibling;
    }
    while (next && !('nodeName' in next && next.nodeName === 'TD'));
    if (next) {
        next.style.color = color;
    }
}

function highlightBG(element, color) {
    element.style.backgroundColor = color;
}

HTML：

<td onMouseOver="highlightBG(this, 'red');highlightNext(this, 'red')" 
    onMouseOut="highlightBG(this, 'white');highlightNext(this, 'black')" >

デモ

HTMLにイベントハンドラーを追加することは良い習慣とは見なされないことに注意してください。

サポートするブラウザーによっては（IE6では確実に機能しません）、JSがオフになっている場合でも機能するCSSアプローチを検討する必要があります。コードがはるかに少なく、この動作を複数の要素に追加する方が簡単です。

td:hover {
    background-color: red;          
}

td:hover + td {
    color: red;   
}

デモ

于 2011-02-04T12:31:17.647 に答える
0

他のtdにIDを指定し、onmouseoverイベントハンドラーからアクセスする必要があります。たぶん、そのonmouseoverコードを独自の関数に入れて、onmouseoverから呼び出す必要があります。

于 2011-02-04T12:49:08.647 に答える