모든 커서 옵션을 탐색하는 CSS
14645 단어 css
커서는 사람이 무슨 일이 일어나고 있는지 이해하는 데 정말 도움이 되므로 필요할 때 커서를 더 많이 사용하도록 합시다.
오늘의 예에서는 모든 옵션을 살펴보겠습니다.
Codepen에서 이 예제의 모든 커서 옵션을 참조하십시오. (타일에 마우스 오버)
HTML 구조
우리
HTML
의 경우 일부 타일을 사용하고 각각 다른 커서로 호버링할 것입니다.<div class="container">
<div class="alias">alias</div>
<div class="all-scroll">all-scroll</div>
<div class="auto">auto</div>
<div class="cell">cell</div>
<div class="context-menu">context-menu</div>
<div class="col-resize">col-resize</div>
<div class="copy">copy</div>
<div class="crosshair">crosshair</div>
<div class="default">default</div>
<div class="e-resize">e-resize</div>
<div class="ew-resize">ew-resize</div>
<div class="grab">grab</div>
<div class="grabbing">grabbing</div>
<div class="help">help</div>
<div class="move">move</div>
<div class="n-resize">n-resize</div>
<div class="ne-resize">ne-resize</div>
<div class="nesw-resize">nesw-resize</div>
<div class="ns-resize">ns-resize</div>
<div class="nw-resize">nw-resize</div>
<div class="nwse-resize">nwse-resize</div>
<div class="no-drop">no-drop</div>
<div class="none">none</div>
<div class="not-allowed">not-allowed</div>
<div class="pointer">pointer</div>
<div class="progress">progress</div>
<div class="row-resize">row-resize</div>
<div class="s-resize">s-resize</div>
<div class="se-resize">se-resize</div>
<div class="sw-resize">sw-resize</div>
<div class="text">text</div>
<div class="w-resize">w-resize</div>
<div class="wait">wait</div>
<div class="zoom-in">zoom-in</div>
<div class="zoom-out">zoom-out</div>
</div>
어떤 목록이 맞습니까? 우리는 너무 많은 커서를 가질 수 있습니다.
CSS 커서 옵션
CSS
의 경우 바로 살펴보겠습니다..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: grab;
}
.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;
}
.w-resize {
cursor: w-resize;
}
.wait {
cursor: wait;
}
.zoom-in {
cursor: zoom-in;
}
.zoom-out {
cursor: zoom-out;
}
그리고 그것이 충분하지 않다면 커스텀 이미지를 얻을 수도 있습니다!
.url {
cursor: url('images/cursor.png'), auto;
}
브라우저 지원
커서는 꽤 잘 지원됩니다! 이 기능은 주변에 있었고 일부 모바일 브라우저는 그것에 대해 다루지 않지만 이것을 "추가"로 보아야 합니다.
읽어주셔서 감사합니다. 연결합시다!
제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하거나
Reference
이 문제에 관하여(모든 커서 옵션을 탐색하는 CSS), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/dailydevtips1/css-exploring-all-cursor-options-5a23텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)