커서를 손가락 포인터로 변경

나는 이것을 가지고 a있고 커서가 일반 링크처럼 손가락 포인터로 변경되도록 "onmouseover"에 삽입해야한다는 것을 모른다.

<a class="menu_links" onclick="displayData(11,1,0,'A')" onmouseover=""> A </a>

내가 넣어야 할 곳을 읽었습니다.

onmouseover="cursor: hand (a pointing hand)"

그러나 그것은 나를 위해 작동하지 않습니다.

또한 이것이 JavaScript, CSS 또는 일반 HTML로 간주되는지 확실하지 않습니다.

<a class="menu_links" onclick="displayData(11,1,0,'A')" onmouseover="" style="cursor: pointer;"> A </a>

CSS입니다.

또는 스타일 시트에서 :

a.menu_links { cursor: pointer; }

CSS에서이 작업을 수행 할 수 있습니다.

a.menu_links {
    cursor: pointer;
}

이것은 실제로 링크의 기본 동작입니다. CSS의 다른 곳에서 재정의했거나 href속성이 없습니다 (예제에서 누락되었습니다).

페이지에 링크가 하나만 있으면이 링크를 사용하는 것이 좋습니다.

onMouseOver="this.style.cursor='pointer'"

CSS 쓰기

a.menu_links:hover{ cursor:pointer}

여기에 여분의 마일을 가고 싶다면 멋진 것이 있습니다. URL에서 링크를 사용하거나 이미지 png를 저장하고 경로를 사용할 수 있습니다. 예를 들면 다음과 같습니다.

url ( 'assets / imgs / theGoods.png');

아래는 코드입니다.

.cursor{
  cursor:url(http://www.icon100.com/up/3772/128/425-hand-pointer.png), auto;
}

따라서 이것은 128 X 128 크기에서만 작동하며 더 큰 이미지는로드되지 않습니다. 그러나 실제로 원하는 이미지를 사용할 수 있습니다! 이것은 순수한 css3 및 일부 html로 간주됩니다. html로해야 할 일은

<div class='cursor'></div>

해당 div에서만 해당 커서가 표시됩니다. 그래서 나는 보통 body 태그에 추가합니다.

위의 "최고의 답변"은 프로그래밍 방식으로는 정확하지만 실제로 제기 된 질문에 대한 답변은 아닙니다. 질문은 mouseover 이벤트에서 포인터를 변경하는 방법을 묻습니다. 어딘가에 오류가있는 방법에 대한 게시물이 질문에 대답하지 않습니다. 허용되는 답변에서 mouseover 이벤트는 공백 ( onmouseover="")이며 대신 스타일 옵션이 포함됩니다. 왜 이런 일이 있었는지 배플 링.

지망생의 링크에는 아무 문제가 없을 수 있습니다. 다음 HTML을 고려하십시오.

<a id=test_link onclick="alert('kinda neat);">Click ME!</a>

사용자 마우스가이 링크 위에 있으면 포인터가 손 모양으로 바뀌지 않고 대신 일반 텍스트 위에 마우스 포인터가 놓인 것처럼 포인터가 작동합니다. 이것을 원하지 않을 수도 있습니다 ... 그래서 마우스 포인터가 바뀌도록 지시해야합니다.

찾고있는 대답은 이것입니다 (다른 사람이 게시했습니다).

<a id=test_link onclick="alert('Nice!');"
       onmouseover="this.style.cursor='pointer';">Click ME!</a>

그러나, 이것들이 많거나, 이런 종류의 것들을 사방에 사용하고 어떤 종류의 변화를 일으키거나 버그에 빠지기로 결정한다면 이것은 악몽입니다. CSS 클래스를 만드는 것이 좋습니다.

a.lendhand {
  cursor: pointer;
}

그때:

<a class=lendhand onclick="alert('hand is lent!');">Click ME!</a>

이 방법보다 더 나은 방법이 많이 있습니다. DIV 의, 버튼 , IMG 등이 더 유용 할 수 있습니다. <a>...</a>그래도 사용 하면 아무런 해가 없습니다 .

자렛.

탐색을 유발하지 않도록 href속성을 추가 return false;하여 이벤트 링크에서 & 유효한 이벤트 링크를 작성하십시오 .

<a href="#" class="menu_links" onclick="displayData(11,1,0,'A'); return false;" onmouseover=""> A </a>

(또는 displayData()false 를 반환하고 ..="return displayData(..)

최고의 답변으로 언급 된 순수한 CSS를 통한 솔루션은이 상황에 적합하지 않습니다.

이 주제의 예제에는 일반적인 static href 속성이 없으며 JS 만 호출하므로 JS 없이는 아무것도하지 않습니다.

따라서 JS로만 포인터를 켜는 것이 좋습니다. 따라서 솔루션

onMouseOver="this.style.cursor='pointer'"

위에서 언급했듯이 (그러나 여기서 언급 할 수는 없습니다)이 경우 가장 좋습니다. (그렇지만 일반적으로 JS를 요구하지 않는 일반 링크의 경우 JS없이 순수한 CSS로 작업하는 것이 좋습니다.)