마우스 커서를 앵커와 같은 스타일로 변경


109

div마우스 커서 위로 마우스를 가져 가면 HTML 앵커와 같은 커서로 변경됩니다.

어떻게 할 수 있습니까? Javascript가 필요합니까 아니면 CSS로만 가능합니까?

답변:


221

당신의 가정 div을 가지고 id="myDiv", 당신의 CSS에 다음을 추가합니다. cursor: pointer커서가 앵커 (하이퍼 링크)에 대한 사용은 같은 손 아이콘되도록 지정 :

추가 할 CSS

#myDiv
{
    cursor: pointer;
}

다음 div과 같이 간단히 의 HTML에 커서 스타일을 추가 할 수 있습니다 .

<div style="cursor: pointer">

</div>

편집하다:

이를 위해 jQuery를 사용하기로 결정한 경우 다음 줄을 $(document).ready()또는 본문에 추가하십시오 onload. ( myClass모든 div공유 클래스로 대체 하십시오 )

$('.myClass').css('cursor', 'pointer');

나는 CSS가 아닌 jquery로 이것을하고 싶다
shibly

7
@guru : 스크립팅이 필요 없습니다. HTML에 추가 style="cursor: pointer"하기 div만하면됩니다. 예를 들어 내 대답을 편집하겠습니다.
Devin Burke

포인터를 "같은 클래스와 다섯 개 부문, 내가 모든이"스타일 = "커서를 추가 할 수 있습니다
shibly

페이지의 CSS 파일에 그 클래스의 CSS 규칙에 "포인터 커서를"사업부 년대 모두가 같은 클래스가있는 경우 @guru, 당신은 실제로 추가 할 수 있습니다
공격

1
문제가 대상의 하나라면, 저스틴 이미 요청으로, 모든 사람들이 항상 요구하는대로, POST 코드는 우리는 당신이 그것을 첨부 도움이 될 수 있도록
Sinetheta

24

CSS 대신 jQuery에서이 작업을 수행하려면 기본적으로 동일한 프로세스를 따릅니다.

일부를 가지고 있다고 가정하면 <div id="target"></div>다음 코드를 사용할 수 있습니다.

$("#target").hover(function() {
    $(this).css('cursor','pointer');
}, function() {
    $(this).css('cursor','auto');
});

그렇게해야합니다.


3
A의 커서가 있기 때문에 불필요 div하다 에서만 마우스가 위에있을 때 표시. 어차피 커서가 보이지 않을 것이기 때문에 사용자가 손을 떼면 제거 할 이유가 없습니다.
Devin Burke

2
질문이 매우 좁게 (DIV에 대해) 질문되었지만이 답변은 광범위하게 적용됩니다. 테이블, <p>, 버튼 등과 같은 모든 HTML 요소에 유용합니다. 그래서 +1했습니다.
PeteH 2011

10

실제로 jQuery가 필요하지 않고 CSS 만 필요합니다. 예를 들어, 다음은 일부 HTML입니다.

<div class="special"></div>

다음은 CSS입니다.

.special
{
    cursor: pointer;
}


0

:hover위의 답변에서 누락 되었다고 생각 합니다. 따라서 다음은 필요한 작업을 수행합니다. (css가 필요한 경우)

#myDiv:hover
{
    cursor: pointer;
}

: hover없이 나를 위해 일했으며 아마도 대답에 많은 긍정적 인 투표가 있기 때문에 더 많은 것 같습니다. 해봤 어?
dading84

예,이 대답을 무시하십시오
being_ethereal
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.