programing tip

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

itbloger 2020. 8. 23. 08:36
반응형

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


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

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


당신의 가정 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에서이 작업을 수행하려면 기본적으로 동일한 프로세스를 따릅니다.

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

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

그렇게해야합니다.


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

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

다음은 CSS입니다.

.special
{
    cursor: pointer;
}

이것은

#myDiv
{
    cursor: pointer;
}

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

#myDiv:hover
{
    cursor: pointer;
}

참고 URL : https://stackoverflow.com/questions/7185044/change-the-mouse-cursor-on-mouse-over-to-anchor-like-style

반응형