| r693 vs r694 | ||
|---|---|---|
| 1 | 1 | {{{#!style |
| 2 | /* 테이블 클래스(hover-table) 하위에 있는 모든 셀(td)에 호버 효과 적용 */ | |
| 3 | .hover-table td:hover { | |
| 4 | background-color: #f00; | |
| 5 | transition: 0.2s; /* 부드러운 전환 효과 (선택사항) */ | |
| 6 | } | |
| 7 | }}} | |
| 8 | ||
| 9 | ||<tableclass=hover-table> 셀 1 || 셀 2 || | |
| 10 | || 셀 3 || 셀 4 || | |
| 11 | ||
| 12 | ||
| 13 | {{{#!style | |
| 2 | 14 | .key:hover { |
| 3 | 15 | background-color:#f00; |
| 4 | 16 | } |
| 17 | }}} | |
| 18 | ||
| 19 | ||<class=key> 내용 || | |
| 20 | ||
| 21 | 이런식으로 되니까 이런식으로 만들라고 이 문법보다 테이블의 셀의 갯수가 많아지면 일일이 <class=key>를 넣을 순 없잖아? | |
| 22 | ||
| 23 | ||
| 24 | } | |
| 5 | 25 | table.keykey:hover > tbody > tr:nth-of-type(2n) > td:first-of-type { |
| 6 | 26 | background-color:#0f0; |
| 7 | 27 | } |
| 8 | }}} | |
| 9 | 28 | |
| 10 | ||
| 11 | 29 | ||<tableclass=keykey> ff || |
| 12 | 30 | || ff || |
| 13 | 31 | || ff || |
| ... | ... | |
| 18 | 36 | || ff || |
| 19 | 37 | || ff || |
| 20 | 38 | |
| 21 | ||<tableclass= | |
| 39 | ||<tableclass=hover-table> ss || ss || ss || ss || ss || | |
| 22 | 40 | || ss || ss || ss || ss || ss || |
| 23 | 41 | || ss || ss || ss || ss || ss || |
| 24 | 42 | || ss || ss || ss || ss || ss || |
| ... | ... |