修改內層標籤的CSS規則使用Javascript

Question

我有這樣的事情：

-HTML-

<table> 
<tr class="x" onMouseOver="light(this)"> 
    <td> 
    <a href="x">Link</a> 
    </td> 
    <td> 
    Text 
    </td> 
</tr> 
</table> 

-CSS-

.x a{ 
    color: black; 
} 

-Javascript-

function light(x){ 
    x.style.color="red"; 
} 

現在，該功能正常工作，但我的標籤不會改變他的顏色。有沒有辦法讓Javascript修改CSS規則.x a的屬性顏色？

Answer 1

這可能是更適合的鏈接：

.x:hover {color:red} 
.x:hover a{color:red} 

這將覆蓋鏈接的顏色，當該行上空盤旋，使得onMouseOver功能是不必要的。

注意，它可能在IE6會失敗，但我個人從來沒有讓其他事情比鏈接在該瀏覽器:hover任何問題......

Answer 2

這應該做的伎倆

x.children[0].children[0].style.color="red"; 

您可以在CSS定義:hover風格的鏈接過於

a:hover { 
    color: red; 
} 

，當你在它懸停，這將改變鏈接的顏色（鏈接）。

.x:hover a { } 

將應用樣式，當你將鼠標懸停在.x

Answer 3

Live Demo

這將改變所有的鏈接那些孩子變紅了。

function light(x){ 
    var elems = x.getElementsByTagName("a"); 
    for(var i=0; i < elems.length;i++){ 
     elems[i].style.color="red"; 
    } 
}​ 

雖然我使用:hover僞類像其他人所說的強烈建議。

Answer 4

-HTML-將你的tr換成<table>標記，並將其轉換爲小寫的onmouseover事件屬性。

<table> 
<tr class="x" onmouseover="light(this)"> 
    <td> 
    <a href="x">Link</a> 
    </td> 
    <td> 
    Text 
    </td> 
</tr> 
</table> 

-Javascript-的JavaScript函數體選擇改變你a標籤

function light(x){ 
    x.getElementsByTagName("a")[0].style.color="red"; 
}