टीओडी पृष्ठभूमि और पाठ को बदलने के लिए माउसओवर घटना

Question

मुझे टीडी पृष्ठभूमि को किसी अन्य टीडी में बदलना होगा जब उपयोगकर्ता का माउस पहले उल्लिखित टीडी पर जाता है।

मैंने यह किया है अब तक:

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

लेकिन यह केवल पहला टीडी की पृष्ठभूमि में परिवर्तन और दूसरा टीडी में पाठ नहीं बदलता है

किसी भी विचार कृपया?

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; 
} 

एचटीएमएल:

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

DEMO

ध्यान दें कि HTML में ईवेंट हैंडलर जोड़ने अच्छा अभ्यास के रूप में नहीं माना जाता है

Answer 1

इस पर एक नजर डालें।

---

Depending on which browser you want to support (यह निश्चित रूप से IE6 में काम नहीं करेगा), तुम सच में सीएसएस दृष्टिकोण है जो भले ही जे एस बंद होने पर कार्य होगा विचार करना चाहिए। बहुत कम कोड है और यह एक से अधिक तत्वों को इस व्यवहार को जोड़ने के लिए आसान हो जाएगा:

td:hover { 
    background-color: red;   
} 

td:hover + td { 
    color: red; 
} 

DEMO

Answer 2

आपको लगता है कि अन्य टीडी अपने onmouseover घटना हैंडलर से एक आईडी और यह पहुँच देना चाहिए। हो सकता है कि आपको उस ऑन-हाउसओवर कोड को अपने स्वयं के फ़ंक्शन में रखना चाहिए और इसे ऑनसाउसओवर से कॉल करना चाहिए।