col, colgroups 및 CSS "hover" 의사 클래스를 단일 셀 이상의 용도로 사용할 수 있습니까?
테이블 행 및 마우스를 올리면 열이 표시되므로 ":hover"와 같은 CSS 의사 클래스를 사용할 수 있습니다. 하지만 단일 셀뿐만 아니라 헤더를 포함한 전체 행이나 열을 강조 표시하려면 어떻게 해야 할까요?
순수한 CSS 솔루션은 ::before 및 ::after 의사 요소를 사용하여 이를 달성할 수 있습니다. 이러한 요소는 각각 선택한 요소 앞과 뒤에 콘텐츠를 추가합니다. 방법은 다음과 같습니다.
강조 요소 만들기:
하이라이트 오버플로 숨기기:
행/열 선택기 추가:
아래 CSS 코드는 다음 원칙을 구현합니다.
table { overflow: hidden; } td, th, .row, .col { cursor: pointer; padding: 10px; position: relative; } td:hover::before, .row:hover::before { background-color: #FFA; content: '<pre class="brush:php;toolbar:false"><table> <tr> <th></th><th>50kg</th><th>55kg</th><th>60kg</th><th>65kg</th><th>70kg</th> </tr> <tr class="row"> <th class="row">160cm</th><td>20</td><td>21</td><td>23</td><td>25</td><td>27</td> </tr> <tr class="row"> <th class="row">165cm</th><td>18</td><td>20</td><td>22</td><td>24</td><td>26</td> </tr> </table>
HTML은 크게 변경되지 않지만 행과 열의 클래스 이름을 포함합니다.
이 솔루션은 최신 브라우저에서 작동합니다. 전체 행과 열에 호버 강조 효과를 우아하게 적용합니다.
위 내용은 `col`, `colgroup` 및 CSS `:hover`를 사용하여 단일 표 셀 이상을 강조 표시할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!