Computer >> 컴퓨터 >  >> 프로그램 작성 >> CSS

CSS를 사용하여 사용자 지정 커서를 만드는 방법

<시간/>

.cur(Internet Explorer의 경우), .gif 및 .png(Chrome, Firefox, Safari의 경우)와 같은 확장자를 사용하여 사용자 지정 커서 이미지를 만들고 CSS cursor 속성을 사용하여 요소에 적용하고 URL로 설정하고 auto, default, pointer 등과 같은 일반 커서 값을 추가하십시오.

해결책

Selector {
   cursor: url("/*path to custom cursor file*/"), generic cursor;
}

예시

예를 들어 맞춤 커서를 만드는 방법을 살펴보겠습니다. -

<!DOCTYPE html>
<html>
<head>
<title>Custom Cursor Using CSS</title>
<style>
form {
   width:70%;
   margin: 0 auto;
   text-align: center;
}
* {
   padding: 2px;
   margin:5px;
}
input[type="button"] {
   border-radius: 10px;
}
#tech1 {
   cursor: url("https://www.tutorialspoint.com/images/dbms.png"), auto;
}
#tech2 {
   cursor: url("https://www.tutorialspoint.com/images/Python.png"), auto;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>Custom Cursor Using CSS</legend>
<h1>Learn</h1>
<input type="button" id="tech1" value="DBMS">
<input type="button" id="tech2" value="Python">
</fieldset>
</form>
</body></html>

출력

다음은 위의 코드에 대한 출력입니다 -

'DBMS' 위로 마우스를 가져갑니다. 버튼 -

CSS를 사용하여 사용자 지정 커서를 만드는 방법

'Python' 위로 마우스를 가져갑니다. 버튼 -

CSS를 사용하여 사용자 지정 커서를 만드는 방법