javascript - 内部タグの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ルール.xaの属性の色を変更させる方法はありますか？

score 0 · Accepted Answer

これにより、子であるすべてのリンクが赤に変更されます。

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

:hover他の人が言っているように、疑似クラスを使用することを強くお勧めしますが。

score 0 · Accepted Answer

これでうまくいくはずです

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

:hoverリンクの CSS でスタイルを定義することもできます

a:hover {
    color: red;
}

ホバーするとリンクの色が変わります (リンク)。

.x:hover a { }

ホバーすると、リンクにスタイルが適用されます.x

score 0 · Accepted Answer

-HTML- tr を inタグで囲み、イベント属性<table>を小文字に変換します。onmouseover

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

a-Javascript-タグを選択するための JavaScript 関数本体を変更します

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

4 に答える 4