href가없는 링크의 포인터로 커서 스타일을 설정하는 방법


135

자바 스크립트 호출을 위한 속성이 <a>없는 많은 HTML 태그 가 있습니다. 이 링크에는 포인터 스타일의 커서가 없습니다. 텍스트 스타일 커서가 있습니다.hrefonclick

href속성 을 사용하지 않고 커서 스타일을 링크 포인터로 설정하려면 어떻게 해야합니까?

href = "#"을 추가 할 수 있다는 것을 알고 있습니다. 나는 이것을 HTML 문서의 많은 곳에서 가지고 있으며 href속성 을 사용하지 않고 링크에 대한 커서 스타일 포인터를 만드는 방법을 알고 싶습니다 .


안녕하십니까, 링크를 말할 때 "<a id="do_some_javascript"> 테스트 </a>"와 같은 의미입니까? 아니면 일부 자바 스크립트를 수행하는 span 또는 div 태그입니까?
Alxandr

답변:


211

CSS 파일에 이것을 추가하십시오 ....

a:hover {
 cursor:pointer;
}

CSS 파일이 없으면 HTML 페이지의 HEAD에 추가하십시오.

<style type="text/css">
 a:hover {
  cursor:pointer;
 }
</style>

또한 자바 스크립트 끝에서 false를 반환하여 href = ""속성을 사용할 수 있습니다.

<a href="" onclick="doSomething(); return false;">a link</a>

이것은 여러 가지 이유로 좋습니다. SEO 또는 사람들이 자바 스크립트가없는 경우 href = ""가 작동합니다. 예 :

<a href="nojavascriptpage.html" onclick="doSomething(); return false;">a link</a>

@ 참조 http://www.alistapart.com/articles/behavioralseparation

편집 : BalusC의 @ 주목할 필요가 대답 그가 언급 :hover영업의 사용 사례에 대한 필요가 없습니다. 다른 스타일은 :hover선택기 로 추가 할 수 있습니다 .


5
: 호버를 사용할 필요는 없으며 href없이 링크에서 작동한다고 보장 할 수 없습니다.
Alxandr

어디에서 작동하지 않을지 상상할 수 없습니다. 이것은 배우는 좋은 방법입니다. href 속성을 가진 링크와 비슷한 다른 추가 동작을 원할 수 있습니다. 배경 변경, 밑줄, 색상 등
Ross

1
내가 이것을 사용하기 때문에,하지만 <IE6 것이 가치가 특징 스타일에 링크를 조건부 주석을 추가 할 수 있습니다 동안 그것은을이었다cursor: hand;
다윗은 분석 재개 모니카 말한다

조건부 주석이 필요하지 않습니다. .myStyle {cursor : hand; cursor : pointer;} 만하면됩니다. 새로운 브라우저는 어쨌든 이해하지 못하기 때문에 손 속성을 무시합니다. 또한 IE6은 여전히 ​​포인터를 이해합니다-손은 ie5 이하입니다.
easwee

a 자체를 사용하면 문제가 발생할 수 있습니다. 특히 IE에서는 false를 반환하더라도 OnBeforeUnload를 트리거하기 때문에 IE에서; javascript에 대한 링크조차 : void (0); OnBeforeUnload가 호출되도록합니다. 나는 직장에서이 문제로 큰 두통을
겪었다

16

이것을 전역 CSS 스타일에 추가하십시오.

a { cursor: pointer; }

이렇게하면 더 이상 브라우저 기본 커서 스타일에 의존하지 않습니다.


작동하지 않습니다. 크롬 text대신 커서가로 pointer바뀝니다.
ZhekaKozlov


6

주어진 object(myObject) 위로 마우스를 가져갈 때 커서를 화살표에서 손으로 변경하는 방법 입니다.

myObject.style.cursor = 'pointer';

1
먼저, 루에 오신 것을 환영합니다! 게시 / 응답 할 때 가능한 한 유익한 정보를 제공하고 코드 예제를 형식화하는 것을 잊지 마십시오 (내가 한 것처럼).
Brian

4

그들에게 공통 클래스를 제공하십시오 (예 : 링크). 그런 다음 CSS 파일을 추가하십시오.

.link { cursor: pointer; }

또는 @mxmissile이 제안한 것처럼 style = "cursor : pointer;"


4

다음 CSS를 사용하여 클래스를 만들고 onclick 이벤트를 사용하여 태그에 추가하십시오.

cursor:pointer;

3

cursor: pointer올바르게 기억 하면 CSS를 사용하십시오 .

CSS 파일에서

.link_cursor
{
    cursor: pointer;
}

그런 다음 링크 커서를 가지려는 요소에 다음 HTML을 추가하십시오 class="link_cursor".

또는 인라인 CSS를 사용하십시오.

<a style="cursor: pointer;">

1

각도 버전 :

<a (click)="action(); $event.preventDefault()" href="#">Action</a>

0

이것은 나를 위해 일했다 :

<a onClick={this.openPopupbox} style={{cursor: 'pointer'}}>
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.