<p>연결된 테이블을 만드는 중인데 목록 링크 중 하나 위로 마우스를 이동하면 테이블 헤더의 배경색이 변경되어 테이블을 더 예쁘게 만들고 싶습니다. 그러나 더 작은 요소에 영향을 주어 컨테이너 요소의 속성을 변경하는 방법을 모르겠습니다. 내 코드는 다음과 같습니다. </p>
<pre class="brush:php;toolbar:false;"><html lang="vi">
<머리>
<스타일>
.toc-컨테이너 {
최대 너비: 600px;
글꼴 모음: "Roboto", sans-serif;
배경: #deff9d;
테두리 반경: 8px;
상자 그림자: 0 4px 11px rgba(0, 0, 0, 0.6);
}
.toc-컨테이너 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;
디스플레이: 블록;
}
</스타일>
</머리>
<본문>
<div class="toc-container">
<h2 클래스="index-heading">heading
<ul class="목차">
<li class="작가">
<a href="#">작성자 이름</a>
<li class="블로그">
<a href="#">Nháp 1</a>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html></pre>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
JavaScript를 사용하면 더 쉽게 달성할 수 있다고 생각합니다. 요소 이벤트를 사용하여
으아악mouseenter和mouseleave스타일 변경을 수행할 수 있습니다. 이것이 도움이 될 수 있습니다. 코드는 다음과 같습니다.