JavaScript/jQuery에서 커서를 대기 상태로 변경하는 방법은 무엇입니까?

onmouseover 및 onmouseout 이벤트를 사용하여 커서를 대기 상태로 설정하거나 변경할 수 있습니다. JavaScript에는 마우스에서 다양한 기능을 수행하는 다양한 유형의 마우스 이벤트가 있습니다. 몇 가지 마우스 이벤트를 살펴보겠습니다.

• onmousedown - 이 이벤트는 HTML 요소에서 마우스 버튼을 눌렀을 때 발생합니다

• onmouseenter - 포인터가 요소 밖으로 이동할 때 발생합니다

• onmousemove - 이 이벤트는 포인터가 HTML 요소 위로 이동할 때 발생합니다

• onmouseout - 포인터가 요소를 떠날 때 발생합니다

• onmouseover - 이 이벤트는 마우스가 HTML 요소 위에 있을 때 발생합니다.

• onmouseup - HTML 요소의 포인터 버튼 해제

onmouseover 및 onmouseout 이벤트는 포인터가 HTML 요소를 떠날 때 사용됩니다. onmouseover 이벤트는 onmouseenter가 버블링되지 않는다는 점을 제외하면 onmouseenter 이벤트와 매우 유사합니다. onmouseover 이벤트는 HTML 태그(html, head, title, style, meta, base, bdo, br, iframe, param 및 script)에서는 작동하지 않습니다.

style.cursor 속성은 포인터가 표시하는 커서 유형을 설정하거나 반환하는 데 사용됩니다. 포인터가 요소 위에 있으면 보이는 마우스 커서를 나타내는 문자열 값이 반환됩니다. 자동이 기본값입니다. 이는 JavaScript의 Cursor 속성에 속합니다.

문법

다음은 JavaScript에서 커서를 대기 상태로 변경하는 구문입니다. -

으아악

매개변수

별칭, 전체 스크롤, 자동, 셀, 상황에 맞는 메뉴, 십자선, 기본값, e-resize, ew-resize, move, n-resize, ne-resize, new-와 같은 스타일 속성에 대해 정의된 다양한 유형의 값 크기 조정, 없음, 포인터, 진행 및 상속.

반환 값

포인터가 요소 위에 있고 표시된 마우스 커서를 나타내는 문자열 값이 반환됩니다.

예

이 예에서는 JavaScript의 도움을 받아 커서를 대기 상태로 변경해 보겠습니다.

으아악

여기에서는 함수 이름 myFunction()이 있는 단락 표시에 onmouseover 마우스 이벤트를 사용합니다. myFunction( ) 메서드의 경우 "document.getElementById( )" 개체를 사용하여 style.cursor 속성을 구현하고 id는 CSS 요소를 정의한 "상자"를 가져옵니다. 커서의 속성 값은 "wait"입니다. 즉, 커서가 HTML 요소 위에 있을 때 커서가 나타날 때마다 대기 상태로 나타납니다.

예

또 다른 예를 들어 다양한 마우스 이벤트를 사용하여 JavaScript에서 커서를 대기 상태로 변경하는 방법을 살펴보겠습니다.

으아악

요소 위에 마우스를 올리면 아래 그림과 같이 커서 모양이 대기 상태로 변경됩니다 -

예

이 예제에서는 jQuery를 사용하여 커서를 대기 상태로 변경하는 방법을 살펴보겠습니다.

으아악

요소 위에 마우스를 올리면 아래 그림과 같이 커서 모양이 대기 상태로 변경됩니다. -

마우스가 요소를 벗어나면 그림과 같이 커서 모양이 기본값으로 돌아갑니다 -

예제에서 볼 수 있듯이 여기서는 "$(this).css("cursor", "progress")"를 사용하여 커서 상태를 div 요소의 진행 상태로 변경합니다. . 커서를 기본 상태로 다시 변경하려면 커서 속성을 기본값 "$(this).css("cursor", "default")"로 설정하면 됩니다.

이 글에서는 커서를 대기 상태로 변경하는 방법을 예시와 함께 설명합니다. 여기서는 두 가지 다른 예를 볼 수 있습니다. 첫 번째 예에서는 onmouseover 이벤트를 사용하여 커서 상태를 변경합니다. 두 번째 예에서는 onmouseover 및 onmouseout 이벤트를 사용하여 커서를 대기 상태로 변경합니다. JavaScript의 두 예 모두 style.cursor 속성을 사용하여 커서 값을 정의합니다. 세 번째 예에서는 jQuery를 사용하여 jQuery 커서 속성을 통해 커서 모양을 변경합니다.

위 내용은 JavaScript/jQuery에서 커서를 대기 상태로 변경하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!