사용자가 목록 항목 위로 마우스를 가져갈 때 커서를 손으로 변경하는 방법은 무엇입니까?

질문자 :user246114

목록이 있고 해당 항목에 대한 클릭 핸들러가 있습니다.

 <ul> <li>foo</li> <li>goo</li> </ul>

마우스 포인터를 손 포인터로 바꾸려면 어떻게 해야 하나요(예: 버튼 위로 마우스를 가져갈 때)? 지금은 목록 항목 위로 마우스를 가져가면 포인터가 텍스트 선택 포인터로 바뀝니다.

시간이 지남에 따라 사람들이 언급했듯이 이제 다음을 안전하게 사용할 수 있습니다.

 li { cursor: pointer; }

Aren

li 사용:

 li:hover { cursor: pointer; }

스니펫 옵션을 실행한 후 예제와 함께 더 많은 커서 속성 보기:

 .auto { cursor: auto; } .default { cursor: default; } .none { cursor: none; } .context-menu { cursor: context-menu; } .help { cursor: help; } .pointer { cursor: pointer; } .progress { cursor: progress; } .wait { cursor: wait; } .cell { cursor: cell; } .crosshair { cursor: crosshair; } .text { cursor: text; } .vertical-text { cursor: vertical-text; } .alias { cursor: alias; } .copy { cursor: copy; } .move { cursor: move; } .no-drop { cursor: no-drop; } .not-allowed { cursor: not-allowed; } .all-scroll { cursor: all-scroll; } .col-resize { cursor: col-resize; } .row-resize { cursor: row-resize; } .n-resize { cursor: n-resize; } .e-resize { cursor: e-resize; } .s-resize { cursor: s-resize; } .w-resize { cursor: w-resize; } .ns-resize { cursor: ns-resize; } .ew-resize { cursor: ew-resize; } .ne-resize { cursor: ne-resize; } .nw-resize { cursor: nw-resize; } .se-resize { cursor: se-resize; } .sw-resize { cursor: sw-resize; } .nesw-resize { cursor: nesw-resize; } .nwse-resize { cursor: nwse-resize; } .cursors > div { float: left; box-sizing: border-box; background: #f2f2f2; border:1px solid #ccc; width: 20%; padding: 10px 2px; text-align: center; white-space: nowrap; &:nth-child(even) { background: #eee; } &:hover { opacity: 0.25 } }

 <h1>Example of cursor</h1> <div class="cursors"> <div class="auto">auto</div> <div class="default">default</div> <div class="none">none</div> <div class="context-menu">context-menu</div> <div class="help">help</div> <div class="pointer">pointer</div> <div class="progress">progress</div> <div class="wait">wait</div> <div class="cell">cell</div> <div class="crosshair">crosshair</div> <div class="text">text</div> <div class="vertical-text">vertical-text</div> <div class="alias">alias</div> <div class="copy">copy</div> <div class="move">move</div> <div class="no-drop">no-drop</div> <div class="not-allowed">not-allowed</div> <div class="all-scroll">all-scroll</div> <div class="col-resize">col-resize</div> <div class="row-resize">row-resize</div> <div class="n-resize">n-resize</div> <div class="s-resize">s-resize</div> <div class="e-resize">e-resize</div> <div class="w-resize">w-resize</div> <div class="ns-resize">ns-resize</div> <div class="ew-resize">ew-resize</div> <div class="ne-resize">ne-resize</div> <div class="nw-resize">nw-resize</div> <div class="se-resize">se-resize</div> <div class="sw-resize">sw-resize</div> <div class="nesw-resize">nesw-resize</div> <div class="nwse-resize">nwse-resize</div> </div>

Santosh Khalse

이를 위해 jQuery가 필요하지 않으며 다음 CSS 콘텐츠를 사용하기만 하면 됩니다.

 li {cursor: pointer}

그리고 짜잔! 능숙한.

Denis 'Alpheus' Cahuk

사용하다:

 li:hover { cursor: pointer; }

현재 HTML 사양에 대한 다른 유효한 값( hand 이 아님 )은 여기에서 볼 수 있습니다.

Alastair

사용하다

 cursor: pointer; cursor: hand;

크로스 브라우저 결과를 원한다면!

user538167

CSS:

 .auto { cursor: auto; } .default { cursor: default; } .none { cursor: none; } .context-menu { cursor: context-menu; } .help { cursor: help; } .pointer { cursor: pointer; } .progress { cursor: progress; } .wait { cursor: wait; } .cell { cursor: cell; } .crosshair { cursor: crosshair; } .text { cursor: text; } .vertical-text { cursor: vertical-text; } .alias { cursor: alias; } .copy { cursor: copy; } .move { cursor: move; } .no-drop { cursor: no-drop; } .not-allowed { cursor: not-allowed; } .all-scroll { cursor: all-scroll; } .col-resize { cursor: col-resize; } .row-resize { cursor: row-resize; } .n-resize { cursor: n-resize; } .e-resize { cursor: e-resize; } .s-resize { cursor: s-resize; } .w-resize { cursor: w-resize; } .ns-resize { cursor: ns-resize; } .ew-resize { cursor: ew-resize; } .ne-resize { cursor: ne-resize; } .nw-resize { cursor: nw-resize; } .se-resize { cursor: se-resize; } .sw-resize { cursor: sw-resize; } .nesw-resize { cursor: nesw-resize; } .nwse-resize { cursor: nwse-resize; }

커서를 이미지로 사용할 수도 있습니다.

 .img-cur { cursor: url(images/cursor.png), auto; }

Khaja Md Sher E Alam

JavaScript를 사용할 수 있을 때만 손/포인터 커서를 표시하는 것이 현명하다고 생각합니다. 그래서 사람들은 클릭할 수 없는 것을 클릭할 수 있다는 느낌을 갖지 않을 것입니다.

이를 달성하기 위해 JavaScript 라이브러리 jQuery를 사용하여 CSS를 다음과 같이 요소에 추가할 수 있습니다.

 $("li").css({"cursor":"pointer"});

또는 클릭 핸들러에 직접 연결하십시오.

또는 <html class="no-js"> 와 함께 모더 나이저를 사용하는 경우 CSS는 다음과 같이 표시됩니다.

 .js li { cursor: pointer; }

Christoph

li:hover {cursor: hand; cursor: pointer;}

Xedret

완전성을 위해:

 cursor: -webkit-grab;

또한 이미지 보기를 이동할 때 아는 손을 제공합니다.

jQuery 및 mousedown을 사용하여 잡기 동작 을 에뮬레이트하려는 경우 매우 유용합니다.

Avatar

완전한 크로스 브라우저의 경우 다음을 사용하십시오.

 cursor: pointer; cursor: hand;

Erich Toven

다음과 같이 하면 됩니다.

 li { cursor: pointer; }

코드에 적용하여 작동 방식을 확인합니다.

 li { cursor: pointer; }

 <ul> <li>foo</li> <li>goo</li> </ul>

참고: 또한 사용자 정의된 커서가 있는 손 모양 커서를 가질 수 있다는 것을 잊지 마십시오. 예를 들어 다음과 같이 좋아하는 손 모양 아이콘을 만들 수 있습니다.

 div { display: block; width: 400px; height: 400px; background: red; cursor: url(http://findicons.com/files/icons/1840/free_style/128/hand.png) 4 12, auto; }

 <div> </div>

Alireza

무엇이든 "마우스 교환" 처리를 할 수 있도록 CSS 클래스를 추가할 수 있습니다.

 .mousechange:hover { cursor: pointer; }

 <span class="mousechange">Some text here</span>

cursor:hand 는 Internet Explorer 5.5 이하에서만 유효하고 Internet Explorer 6은 Windows XP(2002)와 함께 제공되므로 사용하지 말라고 합니다. 사람들은 브라우저가 작동을 멈출 때만 업그레이드 힌트를 얻습니다. 또한 Visual Studio에서는 해당 항목에 빨간색 밑줄이 표시됩니다. 그것은 나에게 말한다 :

유효성 검사(CSS 3.0): "손"은 "커서" 속성에 유효한 값이 아닙니다.

vapcguy

ul li:hover{ cursor: pointer; }

user3776645

다른 모든 응답은 표준 CSS 포인터 사용을 제안하지만 두 가지 방법이 있습니다.

1. CSS 속성 적용 cursor:pointer; 요소에. (커서가 버튼 위에 있을 때의 기본 스타일입니다.)

2. CSS 속성 적용 cursor:url(pointer.png); 포인터에 대한 사용자 정의 그래픽을 사용합니다. 브라우저/OS가 포인터 커서의 모양을 결정하도록 하는 대신 모든 플랫폼에서 사용자 경험이 동일하도록 하려는 경우 이 방법이 더 바람직할 수 있습니다. 이미지를 찾을 수 없는 경우 보조 URL이나 다른 옵션(예: cursor:url(pointer.png,fallback.png,pointer);

li{cursor:pointer;} , class .class{cursor:pointer;} , 또는 각 요소 style="cursor:pointer;" 의 스타일 속성 값으로 목록 항목에 적용될 수 있습니다. style="cursor:pointer;" .

Andrew

사용하다:

 ul li:hover{ cursor: pointer; }

더 많은 마우스 이벤트를 보려면 CSS cursor 속성을 확인하십시오.

Masoud Mustamandi

다음 중 하나를 사용할 수 있습니다.

 li:hover { cursor: pointer; }

또는

 li { cursor: pointer; }

작업 예 1:

 li:hover { cursor: pointer; }

 <ul> <li>foo</li> <li>bar</li> </ul>

작업 예 2:

 li { cursor: pointer; }

 <ul> <li>foo</li> <li>bar</li> </ul>

willy wonka

HTML 해킹 사용

참고: 이것은 나쁜 습관으로 간주되므로 권장하지 않습니다.

href 속성이 포함된 앵커 태그의 내용을 래핑하면 커서를 명시적으로 적용하지 않고도 작동합니다 cursor: pointer; 앵커 속성의 부작용이 있는 속성(CSS로 수정됨):

 <a href="#" style="text-decoration: initial; color: initial;"><div>This is bad practice, but it works.</div></a>

Rohit Nair

아래 코드를 사용할 수 있습니다.

li:hover { cursor: pointer; }

Captain JK

기본 손 기호의 경우:

노력하다

 cursor: pointer

일부 항목을 끌어서 놓는 것과 같은 손 기호를 원하면 다음을 시도하십시오.

 cursor: grab

Nalan Madheswaran

다음 스타일을 사용할 수도 있습니다.

 li { cursor: grabbing; }

Ankit Misra

CSS를 사용하여 커서 포인터 사용자 정의 설정

 /* Keyword value */ cursor: pointer; cursor: auto; /* URL, with a keyword fallback */ cursor: url(hand.cur), pointer; /* URL and coordinates, with a keyword fallback */ cursor: url(cursor1.png) 4 12, auto; cursor: url(cursor2.png) 2 2, pointer; /* Global values */ cursor: inherit; cursor: initial; cursor: unset;

 /* 2 URLs and coordinates, with a keyword fallback */ cursor: url(one.svg) 2 2, url(two.svg) 5 5, progress;

데모

참고: 많은 형식 아이콘에 대한 커서 지원!

.cur, .png, .svg, .jpeg, .webp 등

 li:hover{ cursor: url("https://cdn.xgqfrms.xyz/cursor/mouse.cur"), pointer; color: #0f0; background: #000; } /* li:hover{ cursor: url("../icons/hand.cur"), pointer; } */ li{ height: 30px; width: 100px; background: #ccc; color: #fff; margin: 10px; text-align: center; list-style: none; }

 <ul> <li>a</li> <li>b</li> <li>c</li> </ul>

심판

https://developer.mozilla.org/en-US/docs/Web/CSS/cursor

xgqfrms

다음을 확인하십시오. 나는 W3Schools 에서 그것을 얻습니다.

 .alias { cursor: alias; } .all-scroll { cursor: all-scroll; } .auto { cursor: auto; } .cell { cursor: cell; } .context-menu { cursor: context-menu; } .col-resize { cursor: col-resize; } .copy { cursor: copy; } .crosshair { cursor: crosshair; } .default { cursor: default; } .e-resize { cursor: e-resize; } .ew-resize { cursor: ew-resize; } .grab { cursor: -webkit-grab; cursor: grab; } .grabbing { cursor: -webkit-grabbing; cursor: grabbing; } .help { cursor: help; } .move { cursor: move; } .n-resize { cursor: n-resize; } .ne-resize { cursor: ne-resize; } .nesw-resize { cursor: nesw-resize; } .ns-resize { cursor: ns-resize; } .nw-resize { cursor: nw-resize; } .nwse-resize { cursor: nwse-resize; } .no-drop { cursor: no-drop; } .none { cursor: none; } .not-allowed { cursor: not-allowed; } .pointer { cursor: pointer; } .progress { cursor: progress; } .row-resize { cursor: row-resize; } .s-resize { cursor: s-resize; } .se-resize { cursor: se-resize; } .sw-resize { cursor: sw-resize; } .text { cursor: text; } .url { cursor: url(myBall.cur), auto; } .w-resize { cursor: w-resize; } .wait { cursor: wait; } .zoom-in { cursor: zoom-in; } .zoom-out { cursor: zoom-out; }

 <!DOCTYPE html> <html> <body> <h1>The cursor property</h1> <p>Mouse over the words to change the mouse cursor.</p> <p class="alias">alias</p> <p class="all-scroll">all-scroll</p> <p class="auto">auto</p> <p class="cell">cell</p> <p class="context-menu">context-menu</p> <p class="col-resize">col-resize</p> <p class="copy">copy</p> <p class="crosshair">crosshair</p> <p class="default">default</p> <p class="e-resize">e-resize</p> <p class="ew-resize">ew-resize</p> <p class="grab">grab</p> <p class="grabbing">grabbing</p> <p class="help">help</p> <p class="move">move</p> <p class="n-resize">n-resize</p> <p class="ne-resize">ne-resize</p> <p class="nesw-resize">nesw-resize</p> <p class="ns-resize">ns-resize</p> <p class="nw-resize">nw-resize</p> <p class="nwse-resize">nwse-resize</p> <p class="no-drop">no-drop</p> <p class="none">none</p> <p class="not-allowed">not-allowed</p> <p class="pointer">pointer</p> <p class="progress">progress</p> <p class="row-resize">row-resize</p> <p class="s-resize">s-resize</p> <p class="se-resize">se-resize</p> <p class="sw-resize">sw-resize</p> <p class="text">text</p> <p class="url">url</p> <p class="w-resize">w-resize</p> <p class="wait">wait</p> <p class="zoom-in">zoom-in</p> <p class="zoom-out">zoom-out</p> </body> </html>

Y. Joy Ch. Singha

<style> .para{ color: black; } .para:hover{ cursor: pointer; color: blue; } </style> <div class="para">

위의 HTML 코드에서 [:hover]는 다음 스타일이 해당 스타일 위에 마우스 커서를 올리거나 유지하는 경우에만 적용되어야 함을 나타내는 데 사용됩니다.

CSS에서 사용할 수 있는 몇 가지 유형의 커서가 있습니다.

커서 유형에 대한 아래 코드를 봅니다.

 <style> .alias {cursor: alias;} .all-scroll {cursor: all-scroll;} .auto {cursor: auto;} .cell {cursor: cell;} .context-menu {cursor: context-menu;} .col-resize {cursor: col-resize;} .copy {cursor: copy;} .crosshair {cursor: crosshair;} .default {cursor: default;} .e-resize {cursor: e-resize;} .ew-resize {cursor: ew-resize;} .grab {cursor: -webkit-grab; cursor: grab;} .grabbing {cursor: -webkit-grabbing; cursor: grabbing;} .help {cursor: help;} .move {cursor: move;} .n-resize {cursor: n-resize;} .ne-resize {cursor: ne-resize;} .nesw-resize {cursor: nesw-resize;} .ns-resize {cursor: ns-resize;} .nw-resize {cursor: nw-resize;} .nwse-resize {cursor: nwse-resize;} .no-drop {cursor: no-drop;} .none {cursor: none;} .not-allowed {cursor: not-allowed;} .pointer {cursor: pointer;} .progress {cursor: progress;} .row-resize {cursor: row-resize;} .s-resize {cursor: s-resize;} .se-resize {cursor: se-resize;} .sw-resize {cursor: sw-resize;} .text {cursor: text;} .url {cursor: url(myBall.cur),auto;} .w-resize {cursor: w-resize;} .wait {cursor: wait;} .zoom-in {cursor: zoom-in;} .zoom-out {cursor: zoom-out;} </style>

커서 속성이 어떻게 작동하는지 보려면 아래 링크를 클릭하십시오.

https://www.w3schools.com/cssref/tryit.asp?filename=trycss_cursor

Code Carbonate

호버에서 변경하거나 cursor:pointer 를 지정하면 둘 다 작동합니다.

 ul li { cursor: pointer; }

대안으로

 ul li:hover { cursor: pointer; }

Ismoil Shokirov

출처 : http:www.stackoverflow.com/questions/3087975/how-to-change-the-cursor-into-a-hand-when-a-user-hovers-over-a-list-item