사용자가 목록 항목을 마우스로 가리킬 때 커서를 손으로 바꾸는 방법은 무엇입니까?
목록이 있고 항목에 대한 클릭 핸들러가 있습니다.
<ul>
<li>foo</li>
<li>goo</li>
</ul>
마우스 포인터를 손 포인터로 변경하려면 어떻게 해야 합니까(예: 단추 위에서 마우스를 이동할 때)?목록 항목 위에 마우스를 놓으면 포인터가 텍스트 선택 포인터로 바뀝니다.
사람들이 언급했듯이, 시간의 흐름에 비추어 볼 때, 이제 안전하게 다음을 사용할 수 있습니다.
li { cursor: pointer; }
용도에 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>이를 위해 jQuery가 필요하지 않으며 다음 CSS 콘텐츠를 사용하면 됩니다.
li {cursor: pointer}
그리고 voila!편리한.
사용:
li:hover {
cursor: pointer;
}
한 값 값은 " " " " " (" " " " )입니다.hand현재 HTML 사양의 경우 여기에서 확인할 수 있습니다.
사용하다
cursor: pointer;
cursor: hand;
만약 당신이 크로스 브라우저 결과를 원한다면!
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;
}
자바스크립트를 사용할 수 있을 때만 핸드/포인터 커서를 보여주는 것이 현명할 것 같습니다.그래서 사람들은 클릭할 수 없는 것을 클릭할 수 있다는 느낌을 갖지 못할 것입니다.
이를 위해 자바스크립트 라이브러리 jQuery를 사용하여 CSS를 요소에 추가할 수 있습니다.
$("li").css({"cursor":"pointer"});
또는 클릭 핸들러에 직접 연결합니다.
또는 모더니즘과 결합된 경우<html class="no-js">사용할 경우 CSS는 다음과 같습니다.
.js li { cursor: pointer; }
li:hover {cursor: hand; cursor: pointer;}
전체 크로스 브라우저의 경우 다음을 사용합니다.
cursor: pointer;
cursor: hand;
완전성을 위해:
cursor: -webkit-grab;
또한 이미지의 보기를 이동할 때 사용자가 알고 있는 도움말도 제공합니다.
jQuery 및 마우스다운을 사용하여 grab 동작을 에뮬레이트하려는 경우 매우 유용합니다.
하거나 "" "" " " " " " 를 .cursor:pointer목록 항목에서 둘 다 작동합니다.
ul li {
cursor: pointer;
}
대안적으로
ul li:hover {
cursor: pointer;
}
어떤 것이든 "마우스 체인지" 처리를 받을 수 있도록 CSS 클래스를 추가할 수 있습니다.
.mousechange:hover {
cursor: pointer;
}<span class="mousechange">Some text here</span>을 사용하라는 말은 하지 않겠습니다.cursor:hand인터넷 익스플로러 5.5 이하에서만 유효했기 때문에 인터넷 익스플로러 6은 윈도우 XP(2002)와 함께 제공되었습니다.사용자는 브라우저가 작동을 중지할 때만 업그레이드 힌트를 얻을 수 있습니다.또한 Visual Studio에서는 해당 항목에 빨간색 밑줄이 표시됩니다.제게 말해줍니다.
유효성 검사(CSS 3.0): "손"은 "커서" 속성에 대한 유효한 값이 아닙니다.
간단히 이 코드를 입력합니다.
li{cursor: pointer;}
다음과 같은 작업을 수행합니다.
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>ul li:hover{
cursor: pointer;
}
다른 모든 응답은 표준 CSS 포인터를 사용하는 것을 제안하지만, 두 가지 방법이 있습니다.
속성 CSS
cursor:pointer;때 (이것은 커서가 단추 위에 있을 때 기본 스타일입니다.)속성 CSS
cursor:url(pointer.png);사용자 지정 그래픽을 포인터에 사용합니다.브라우저/OS가 포인터 커서의 모양을 결정하도록 하는 대신 모든 플랫폼에서 사용자 환경이 동일하도록 하려면 이 방법이 더 바람직할 수 있습니다.보조 URL 또는 기타 옵션(예: 다른 옵션)을 포함하여 이미지를 찾을 수 없는 경우 예비 옵션이 추가될 수 있습니다.cursor:url(pointer.png,fallback.png,pointer);
에 적용될 수 있습니다.li{cursor:pointer;}.class{cursor:pointer;} 각 요소의 합니다.style="cursor:pointer;".
사용:
ul li:hover{
cursor: pointer;
}
더 많은 마우스 이벤트를 보려면 CSS 커서 속성을 확인하십시오.
다음 중 하나를 사용할 수 있습니다.
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>기본 손 기호의 경우:
해라
cursor: pointer
항목을 끌어다 놓는 것과 같은 손 기호를 사용하려면 다음을 시도합니다.
cursor: grab
아래 코드를 사용할 수 있습니다.
li:hover { cursor: pointer; }
다음을 확인합니다.저는 W3 학교로부터 그것을 얻습니다.
.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>HTML 해킹 사용
참고: 이는 잘못된 관행으로 간주되므로 권장되지 않습니다.
내용을 포함하는 앵커 태그로 포장href으로 속성명로적않작고동다니합지용하를 적용하지 않고 합니다.cursor: pointer; 특성(CSS로 : 커성속부작있는속이성앵용의(CSS로):
<a href="#" style="text-decoration: initial; color: initial;"><div>This is bad practice, but it works.</div></a>다음 스타일도 사용할 수 있습니다.
li {
cursor: grabbing;
}
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
<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
tailwindcss의 동등한 클래스는 'tailwindcs'입니다.
이것은 그냥 CSS 스타일을 사용하면 됩니다.
li { cursor: pointer; }
언급URL : https://stackoverflow.com/questions/3087975/how-to-change-the-cursor-into-a-hand-when-a-user-hovers-over-a-list-item
'programing' 카테고리의 다른 글
| RichTextBox(WPF)에 "Text" 문자열 속성이 없습니다. (0) | 2023.06.04 |
|---|---|
| 처음 사용한 후에도 할당된(재) 변수(글로벌이어야 함)를 사용하려고 하는 UnboundLocalError (0) | 2023.06.04 |
| Angular 6에서 ng serve를 통해 환경을 설정하는 방법 (0) | 2023.06.04 |
| Xcode 파생 데이터 폴더의 내용을 안전하게 삭제할 수 있습니까? (0) | 2023.06.04 |
| Google Colab의 연결 해제를 방지하려면 어떻게 해야 합니까? (0) | 2023.06.04 |