CSS에서 커서를 손 포인터로 변경

1. CSS에서 cursor 속성을 사용하여 마우스 포인터를 손 포인터로 변경
2. cursor 속성의 url() 함수를 사용하여 CSS에서 마우스 포인터를 사용자 지정 손 포인터로 변경

이 기사에서는 CSS에서 항목을 나열하기 위해 마우스를 이동하는 동안 마우스 포인터를 손 포인터로 변경하는 방법을 소개합니다.

CSS에서 cursor 속성을 사용하여 마우스 포인터를 손 포인터로 변경

CSS cursor 속성을 사용하여 특정 요소를 가리킬 때 마우스 포인터가 표시되는 방식을 변경할 수 있습니다.

예를 들어 속성을 사용하여 cursor 속성 값을 pointer로 설정하여 마우스 포인터를 손 포인터로 변경할 수 있습니다. CSS에서 특정 요소를 선택하고 이 속성을 적용할 수 있습니다.

cursor 속성에는 많은 옵션이 있습니다. 일부 옵션은 help, wait, crosshair, not-allowed, zoom-in 등입니다.

예를 들어 HTML에서 ul 및 li 태그를 사용하여 목록 항목을 만들고 CSS에서 li 태그를 선택하고 cursor 속성을 pointer로 설정합니다. 마우스 포인터를 목록 항목으로 이동하면 마우스 포인터가 가리키는 손 모양으로 바뀝니다.

이런 식으로 CSS에서 마우스 포인터를 손 포인터로 변경할 수 있습니다.

예제 코드:

<ul>
<li> Porcupine Tree</li>
<li>Opeth</li>
</ul>

li {
 cursor: pointer;
}

cursor 속성의 url() 함수를 사용하여 CSS에서 마우스 포인터를 사용자 지정 손 포인터로 변경

CSS의 cursor 속성에서 url() 함수를 사용하여 사용자 정의 손 포인터를 추가할 수도 있습니다.

url() 함수에서 이미지의 URL을 지정해야 합니다. 하나가 작동하지 않으면 다른 하나가 작동할 수 있도록 여러 URL을 폴백으로 지정할 수 있습니다.

여러 url() 함수는 쉼표로 구분됩니다. 마우스 포인터를 특정 요소로 이동하면 사용자 정의 포인터가 표시됩니다.

함수에서 사용자 정의 손 포인터의 URL을 설정하여 CSS에서 마우스 포인터를 손 포인터로 변경할 수 있습니다.

예를 들어 데모의 첫 번째 방법과 동일한 목록을 사용합니다. CSS에서 li 태그를 선택하고 cursor 속성을 작성한 다음 cursor 속성을 url() 함수로 설정합니다. 여기서 URL https://img.icons8.com/nolan/32/hand-cursor.png는 매개변수입니다. 다음으로, 폴백으로 쉼표 뒤에 auto를 작성합니다.

따라서 url() 함수를 사용하여 사용자 정의 손 포인터를 만들고 CSS의 목록 위로 마우스를 가져가는 동안 표시할 수 있습니다.

예제 코드:

<ul>
<li> Porcupine Tree</li>
<li>Opeth</li>
</ul>

li {
 cursor: url("https://img.icons8.com/nolan/32/hand-cursor.png"), auto;
}