CSS를 사용하여 마우스 오버 시 테이블의 행과 열을 강조 표시하는 방법은 무엇입니까?

CSS를 사용하여 마우스 오버 시 테이블의 행과 열 강조 표시

이 질문에서 사용자는 테이블에서 행과 열을 모두 강조 표시하는 것을 목표로 합니다. HTML 테이블 위로 마우스를 가져갑니다. 그들은 하이라이트가 한 축에서 다른 축으로 확장되어 마우스를 올린 셀에서 교차하기를 원합니다.

CSS 솔루션

다음은 원하는 효과를 달성하는 순수한 CSS 솔루션입니다.

table {
    border-spacing: 0;
    border-collapse: collapse;
    overflow: hidden;
    z-index: 1;
}

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 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>
    <tr>
        <th class="row">160cm</th>
        <td>20</td><td>21</td><td>23</td><td>25</td><td>27</td>
    </tr>
    <tr>
        <th class="row">165cm</th>
        <td>18</td><td>20</td><td>22</td><td>24</td><td>26</td>
    </tr>
    <tr>
        <th class="row">170cm</th>
        <td>17</td><td>19</td><td>21</td><td>23</td><td>25</td>
    </tr>
    <tr>
        <th class="row">175cm</th>
        <td>16</td><td>18</td><td>20</td><td>22</td><td>24</td>
    </tr>
</table>

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

설명

이 CSS는 의사 요소, 절대 위치 지정 및 Z-인덱싱을 조합하여 원하는 효과를 만들어냅니다.

• :before 및 ::after 의사 요소는 대상 요소(행 및 열) 앞뒤에 보이지 않는 상자를 만듭니다.
• 절대 위치 지정을 통해 이러한 상자는 상위 요소의 범위를 넘어 확장될 수 있습니다. .
• z-index를 -1로 설정하면 이러한 상자가 실제 테이블 셀 아래에 위치하여 사용자 상호 작용을 방해하지 않게 됩니다.

HTML

해당 HTML 마크업은 다음과 같습니다.

이 마크업에서는 .row 및 .col 클래스를 테이블 헤더 요소에 추가하여 일반 행 및 열과 구별합니다. 원하는 경우 다른 스타일을 적용할 수 있습니다.

이 솔루션은 JavaScript나 외부 라이브러리 없이도 마우스를 가져가면 표 행과 열을 강조 표시할 수 있는 유연한 접근 방식을 제공합니다.

위 내용은 CSS를 사용하여 마우스 오버 시 테이블의 행과 열을 강조 표시하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!