CSS만 사용하여 마우스 오버 시 테이블 행과 열을 모두 강조 표시하려면 어떻게 해야 합니까?

CSS "Hover" 의사 클래스를 사용하여 마우스 오버 시 테이블 행 및 열 강조 표시

이 시나리오에서는 마우스 오버 시 테이블 행과 열 모두 강조 표시됩니다. 및 . 순수한 CSS 방법을 살펴보겠습니다.

강조 표시를 위해 의사 요소 사용

행과 열을 강조 표시하기 위해 ::before 및 ::after 의사 요소를 사용합니다. 강요. 이는 문서의 흐름 외부에 절대적으로 위치하는 가상 요소를 생성합니다.

td:hover::before, /* Highlight rows on hover */
.row:hover::before { 
    background-color: #ffa;
    content: '<pre class="brush:php;toolbar:false"><tr class="row">
    <th class="col">50kg</th>
    <th class="col">55kg</th>
    <th class="col">60kg</th>
    <th class="col">65kg</th>
    <th class="col">70kg</th>
</tr>

a0'; height: 100%; left: -5000px; position: absolute; top: 0; width: 10000px; z-index: -1; } td:hover::after, /* Highlight columns on hover */ .col:hover::after { background-color: #ffa; content: 'a0'; height: 10000px; left: 0; position: absolute; top: -5000px; width: 100%; z-index: -1; }

• td 또는 .row를 마우스로 가리키면 전체 행이 강조 표시됩니다.
• td 또는 .col 마우스를 올리면 전체 열이 강조 표시됩니다.
• z-index: -1은 강조 표시를 테이블 데이터 셀 아래에 배치합니다.
• 위치: 절대 및 매우 큰 차원을 사용하면 강조 표시가 셀 경계를 넘어 확장됩니다.
• overflow: 테이블에 숨겨져 있으면 오버플로가 숨겨집니다.

특정성을 위한 CSS 클래스

HTML에서는 . 행 및 .col을 사용하여 대상 요소를 명확하게 지정합니다.

결론

이 솔루션은 순전히 CSS를 사용하여 마우스를 올리면 행과 열을 모두 강조 표시하며 CSS에 의존하지 않습니다. 자바스크립트 또는 jQuery. 모든 최신 브라우저에서 작동하며 이전 브라우저에서는 정상적으로 성능이 저하됩니다.

위 내용은 CSS만 사용하여 마우스 오버 시 테이블 행과 열을 모두 강조 표시하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!