CSS에서는 HTML 요소에 따라 다양한 유형의 커서가 사용되며, 커서의 유형을 변경하려면 ' 커서 ' 속성이 사용됩니다. 커서 유형을 변경하고 화면에 표시하려는 커서 값을 설정할 수 있습니다. 추가 기능으로 자신만의 커서 이미지를 설정할 수도 있습니다.

이 가이드에서는 다음을 배우게 됩니다.

• 커서 CSS 속성이란 무엇입니까?
• CSS를 사용하여 Hover에서 커서를 이미지로 변경하는 방법

시작하겠습니다!

'커서' CSS 속성이란 무엇입니까?

HTML 요소 위의 마우스 모양을 제어하려면 ' 커서 ” CSS 속성을 사용할 수 있습니다. 일반 커서를 복사 커서, 손 포인터, 잡기 등과 같은 다양한 유형으로 변경할 수 있습니다. cursor 속성에서 이미지의 url을 설정하여 사용자 정의 커서를 설정할 수도 있습니다.

통사론

cursor 속성의 구문은 다음과 같습니다.

위의 구문에서 ' URL() '를 화면에 표시하려는 것입니다.

이제 일반 커서를 마우스 오버 시 이미지로 변경하는 예제로 이동합니다.

CSS를 사용하여 커서를 가리켜 이미지로 변경하는 방법은 무엇입니까?

커서를 가리켜 이미지로 변경하려면 먼저 HTML에 요소를 추가합니다.

예제 1: cursor 속성을 사용하여 커서를 가리켜 이미지로 변경

제목

과 버튼 클래스 이름을 ' btn '.

HTML

< 신체 >
< h1 > 커서를 가리키면 이미지로 변경 h1 >
< 단추 수업 = '비엔' > 클릭 해주세요 단추 >
신체 >

현재 버튼을 가리키면 기본 커서가 표시됩니다.

이제 CSS로 이동하여 커서를 이미지로 변경합니다.

그런 다음 '에서 이미지의 경로를 설정하십시오. URL() '. 예를 들어 'i with.svg '를 선택한 이미지로 사용합니다. 그런 다음 cursor 속성의 값을 ' 자동 '.

CSS

.btn {
커서: URL ( icon.svg ) , 자동;
패딩: 10px;
}

위의 코드를 저장하고 HTML 파일을 실행하면 다음과 같은 결과를 볼 수 있습니다.

주어진 출력은 커서가 호버링 시 이미지로 성공적으로 변경되었음을 나타냅니다.

메모: ' 자동 '는 cursor 속성의 대체 옵션으로 사용됩니다. 이미지가 로드되지 않거나 파일 경로 또는 파일 자체가 누락된 경우 auto 값으로 인해 기본 아이콘이 화면에 표시됩니다.

예 2: 마우스 오버 시 기본 커서 설정

예를 들어 이미지의 url을 지정하고 cursor 속성의 값만 ' 자동 ':

커서: URL ( ) , 자동;

결과적으로 버튼 위에 커서를 올려도 커서가 변경되지 않습니다.

예 3: 마우스 오버 시 대체 이미지 설정

자동 대신 이미지에 대한 대안으로 표시하려는 커서의 다른 값을 설정할 수 있습니다. 예를 들어 커서 속성의 값을 ' 자동 ' 에게 ' 바늘 ':

커서: URL ( ) , 포인터;

아래 출력에서 ​​볼 수 있듯이 커서를 버튼 위로 가져가면 커서가 손 포인터로 변경됩니다.

CSS를 사용하여 마우스 오버 시 커서 이미지를 변경하는 가장 쉬운 방법을 제공했습니다.

결론

CSS에서 ' 커서 ' 재산. '를 할당하여 일반 커서를 이미지로 변경할 수 있습니다. URL ” 이미지를 cursor 속성에 추가합니다. 커서가 요소 위에 있을 때 표시하려는 모든 유형의 커서를 적용할 수 있습니다. 이 기사에서는 커서를 손 포인터로 변경하는 방법을 설명했습니다.