<p>リンク テーブルを作成しています。リスト リンクの 1 つにマウスを移動したときにテーブル ヘッダーの背景色を変更して、テーブルをより美しくしたいと考えています。ただし、コンテナ要素の小さな要素に影響を与えて、コンテナ要素のプロパティを変更する方法がわかりません。これは私のコードです: </p>
<pre class="brush:php;toolbar:false;"><html lang="vi">
<頭>
<スタイル>
.toc-コンテナ {
最大幅: 600ピクセル;
フォントファミリー: 「Roboto」、サンセリフ;
背景: #deff9d;
境界半径: 8px;
ボックスシャドウ: 0 4px 11px rgba(0, 0, 0, 0.6);
}
.toc-container h2.index-Heading {
テキスト変換: 大文字;
フォントの太さ: 通常;
マージン: 0 16px;
パディングトップ: 16px;
}
。目次 {
リストスタイル: なし;
パディング: 0;
}
.目次 li.author li.blog {
背景: #222;
トランジション: 400ms;
リストスタイル: なし;
}
.目次 li.author{
背景色: 緑;
}
.目次 li.author li:nth-of-type(even).blog {
背景: #2e2e2e;
}
.目次 li.author li:hover.blog {
背景: #000;
}
.目次 li a {
テキスト装飾: なし。
色: #fff;
マージン左: 24px;
パディング: 16px 0;
表示ブロック;
}
</スタイル>
</head>
<本体>
<div class="toc-container">
<h2 class="index-Heading">見出し</h2>
<ul class="目次">
<li class="著者">
<a href="#">著者名</a>
<li class="ブログ">
<a href="#">Nháp 1</a>
</li>
</ul>
</li>
</ul>
</div>
</ボディ>
</html></pre>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
これは JavaScript を使用すると簡単に実現できると思います。要素イベント
リーリーmouseenterとmouseleaveを使用してスタイルを変更できます。これが役に立つかもしれません。コードは次のとおりです: