.pointer {
cursor: pointer;
}
cursor: pointer;
/* Mouse image is a hand */
input{
caret-color: red;
}
/* Keyword value */
cursor: auto;
cursor: pointer;
/* more at: https://developer.mozilla.org/en-US/docs/Web/CSS/cursor#keyword
/* … */
cursor: zoom-out;
/* URL with mandatory keyword fallback */
cursor: url(hand.cur), pointer;
/* URL and coordinates, with mandatory keyword fallback */
cursor: url(cursor_1.png) 4 12, auto;
cursor: url(cursor_2.png) 2 2, pointer;
/* URLs and fallback URLs (some with coordinates), with mandatory keyword fallback */
cursor: url(cursor_1.svg) 4 5, url(cursor_2.svg), /* … ,*/ url(cursor_n.cur) 5 5,
progress;
/* Global values */
cursor: inherit;
cursor: initial;
cursor: revert;
cursor: revert-layer;
cursor: unset;
body {
/*(Cursor image must be 32*32 pixles)*/
cursor: url(CURSOR_URL), auto;
}
div{
cursor: pointer;
}
#custom-cursor {
display: none;
position: fixed;
width: 20px;
height: 20px;
top: -10px;
left: -10px;
border: 2px solid black;
border-radius: 50%;
opacity: 1;
background-color: #fb4d98;
pointer-events: none;
z-index: 99999999;
transition: transform ease-out 0.15s, border 0.5s, opacity 0.5s, background-color 0.5s;
}
#custom-cursor.active {
opacity: 0.5;
background-color: #000;
border: 2px solid #fb4d98;
}
details summary {
cursor: pointer;
}
details summary > * {
display: inline;
}