다시 작성된 제목은 다음과 같습니다. 커서가 목록 요소로 이동하면 목록 제목을 변경합니다.
<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>
