Событие MouseOver для изменения фона и текста TD

Question

Мне нужно изменить фон тд на серый и текст в другой тд, когда пользовательская мышь проходит над первым упомянутым тд.

Я уже сделал это:

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

но это только меняет фон первого тд и не меняет текст во втором тд

есть идеи пожалуйста?

Answer 1

Посмотрите на это:

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')" >

DEMO

Обратите внимание, что добавление обработчика событий в HTML не считается хорошей практикой.

---

В зависимости от того, какой браузер вы хотите поддерживать (он определенно не будет работать в IE6), вам действительно следует рассмотреть подход CSS, который будет работать, даже если JS выключен. Гораздо меньше кода, и будет проще добавить это поведение к нескольким элементам:

td:hover {
    background-color: red;          
}

td:hover + td {
    color: red;   
}

DEMO

Answer 2

Вы должны присвоить этому другому идентификатору и получить доступ к нему из вашего обработчика события onmouseover. Возможно, вам следует поместить этот код onmouseover в его собственную функцию и вызвать его из onmouseover.