마우스가 테이블의 행 위에 이동할 때 커서를 손으로 변경

마우스가 테이블의 행 위에 이동할 때 커서를 손으로 변경

마우스를 사용할 때 커서 포인터를 손으로 변경하려면 어떻게 합니까?<tr>순식간에<table>

<table class="sortable" border-style:>
  <tr>
    <th class="tname">Name</th><th class="tage">Age</th>
  </tr>
  <tr><td class="tname">Jennifer</td><td class="tage">24</td></tr>
  <tr><td class="tname">Kate</td><td class="tage">36</td></tr>
  <tr><td class="tname">David</td><td class="tage">25</td></tr>
  <tr><td class="tname">Mark</td><td class="tage">40</td></tr>
</table>

CSS를 사용하면 실제로 이를 수행할 수 있습니다.

.sortable tr {
    cursor: pointer;
}

부트스트랩 스타일을 조금 검색해보니 다음과 같습니다.

[role=button]{cursor:pointer}

따라서 다음과 같이 원하는 것을 얻을 수 있습니다.

<span role="button">hi</span>

내가 찾은 가장 쉬운 방법은 추가하는 것입니다.

style="cursor: pointer;"

당신의 태그에.

더하다cursor: pointer당신의 CSS에.

나는 이것을 나의 것에 추가했습니다.style.css커서 옵션 관리하기

.cursor-pointer {cursor: pointer;}
.cursor-crosshair {cursor: crosshair;}
.cursor-eresize {cursor: e-resize;}
.cursor-move {cursor: move;}

스타일 사용cursor: pointer;커서를 변경할 요소의 CSS에 있습니다.

이 경우 다음을 사용합니다(.css 파일에서).

.sortable {
    cursor: pointer;
}

IE < 6과의 호환성을 위해 다음 스타일을 순서대로 사용합니다.

.sortable:hover {
    cursor: pointer;
    cursor: hand;
}

그러나 IE < 7은 다음을 지원합니다.:hover와만 유사한 클래스<a>원소의

스타일이 인라인인 예제:

<table>
  <tr> <td style="cursor: pointer;">mouse me over: pointer</td> </tr>
  <tr> <td style="cursor: wait;">mouse me over: wait</td> </tr>
  <tr> <td style="cursor: zoom-in;">mouse me over: zoom-in</td> </tr>
</table>

CSS 커서 속성을 다음과 같이 사용합니다.

<table class="sortable">
  <tr>
    <th class="tname">Name</th><th class="tage">Age</th>
  </tr>
  <tr style="cursor: pointer;"><td class="tname">Jennifer</td><td class="tage">24</td></tr>
  <tr><td class="tname">Kate</td><td class="tage">36</td></tr>
  <tr><td class="tname">David</td><td class="tage">25</td></tr>
  <tr><td class="tname">Mark</td><td class="tage">40</td></tr>
</table>

물론 당신은 스타일을 CSS 파일에 넣어서 수업에 적용해야 합니다.

CSS 사용

table tr:hover{cursor:pointer;} /* For all tables*/
table.sortable tr:hover{cursor:pointer;} /* only for this one*/

위의 솔루션은 표준적으로 작동하지만 데이터 테이블을 사용하는 경우 기본 datatables.css 설정을 재정의하고 다음 코드를 사용자 지정 css에 추가해야 합니다. 아래 코드에서 row-select는 html에 표시된 것처럼 데이터 테이블에 추가한 클래스입니다.

table.row-select.dataTable tbody td
{
cursor: pointer;    
}

HTML은 다음과 같이 표시됩니다.

<table datatable="" dt-options="dtOptions1" dt-columns="dtColumns1" class="table table-striped table-bordered table-hover row-select"  id="datatable"></table>

언급URL : https://stackoverflow.com/questions/9287693/change-cursor-to-hand-when-mouse-goes-over-a-row-in-table