用Javascript修改内部标记的CSS规则

我有这样的想法：

-HTML-

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

-Javascript-

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

---

现在，该功能正常工作，但我的a标签不会改变其颜色。有没有办法让Javascript修改CSS规则.xa的属性颜色？

这就可以了

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

您也可以在CSS中为链接定义

：hover

样式

a:hover {
    color: red;
}

当你将鼠标悬停在链接上时，它会改变链接的颜色

---

当您将鼠标悬停在

.x

上时，将对链接应用一种样式这应该可以做到

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

您也可以在CSS中为链接定义

：hover

样式

a:hover {
    color: red;
}

当你将鼠标悬停在链接上时，它会改变链接的颜色

---

将鼠标悬停在

.x

上时，将对链接应用样式这可能更合适：

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

当行悬停在上方时，这将覆盖链接的颜色，从而使

onMouseOver

功能不必要

---

请注意，它可能会在IE6中失败，但就我个人而言，除了在该浏览器中创建链接以外，我从未遇到过任何问题。

这可能更合适：

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

当行悬停在上方时，这将覆盖链接的颜色，从而使

onMouseOver

功能不必要

请注意，它在IE6中可能会失败，但就我个人而言，除了在该浏览器中悬停链接以外，我从来没有遇到过任何问题…

这会将所有子链接更改为红色

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

功能灯（x）{
var elems=x.getElementsByTagName（“a”）；
对于（变量i=0；i

尽管我强烈建议像其他人提到的那样使用

：hover

psuedo类。

这会将所有子链接更改为红色

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

功能灯（x）{
var elems=x.getElementsByTagName（“a”）；
对于（变量i=0；i

---

尽管我强烈建议像其他人提到的那样使用

：hover

psuedo类。

-HTML-用in

标记包装tr，并将

onmouseover

事件属性转换为小写

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

---

-HTML-用in

标记包装tr，并将

onmouseover

事件属性转换为小写

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

---

如果您只是在人们悬停链接时更改颜色，则可以使用

：hover

伪选择器。由于您的css直接设置

a

元素的样式，因此必须使用javascript直接设置

a

元素的样式，以覆盖css定义。这是其级联特性的一部分。请参见，如果您只是在人们悬停链接时更改颜色，则可以使用

：hover

伪选择器。由于css直接设置

a

元素的样式，因此您必须使用javascript直接设置

a

元素的样式，以便覆盖css定义。这是其级联特性的一部分。参见IE6，不应该再诚实地提及了。不过要指出的是，IE6及以下版本不支持伪类

：将
悬停在标签之外的任何东西上。这使得Javascript功能完全无用，效果更好！CSS的力量。谢谢你，我不应该再诚实地提及你了。不过要指出的是，IE6及以下版本不支持伪类
：将
悬停在标签之外的任何东西上。这使得Javascript功能完全无用，效果更好！CSS的力量。谢谢对不起，我忘了标签，我不敢在桌子外面用。对不起，我忘了标签，我不敢在桌子外面用