💻 Código HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/cursor.css">
<title>Document</title>
</head>
<body>
<h1>Cursores del ratón</h1>
<section>
<div>01 auto</div>
<div>02 default</div>
<div>03 none</div>
<div>04 context-menu</div>
<div>05 help</div>
<div>06 pointer</div>
<div>07 progress</div>
<div>08 wait</div>
<div>09 cell</div>
<div>10 crosshair</div>
<div>11 text</div>
<div>12 vertical-text</div>
<div>13 alias</div>
<div>14 copy</div>
<div>15 move</div>
<div>16 no-drop</div>
<div>17 not-allowed</div>
<div>18 all-scroll</div>
<div>19 col-resize</div>
<div>20 row-resize</div>
<div>21 n-resize</div>
<div>22 s-resize</div>
<div>23 e-resize</div>
<div>24 w-resize</div>
<div>25 ns-resize</div>
<div>26 ew-resize</div>
<div>27 ne-resize</div>
<div>28 nw-resize</div>
<div>29 se-resize</div>
<div>30 sw-resize</div>
<div>31 nesw-resize</div>
<div>32 nwse-resize</div>
<div>33 zoom-in</div>
<div>34 zoom-out</div>
<div>35 image</div>
</section>
</body>
</html>
🎨 Código CSS
div {
height: 50px;
min-width: 200px;
max-width: 250px;
border: 1px solid black;
border-radius: 10px;
text-align: center;
padding: 10px 0;
box-sizing: border-box;
display: inline-block;
margin: 10px;
}
div:hover {
background-color: #eee;
}
div:nth-child(1) {
cursor: auto;
}
div:nth-child(2) {
cursor: default;
}
div:nth-child(3) {
cursor: none;
}
div:nth-child(4) {
cursor: context-menu;
}
div:nth-child(5) {
cursor: help;
}
div:nth-child(6) {
cursor: pointer;
}
div:nth-child(7) {
cursor: progress;
}
div:nth-child(8) {
cursor: wait;
}
div:nth-child(9) {
cursor: cell;
}
div:nth-child(10) {
cursor: crosshair;
}
div:nth-child(11) {
cursor: text;
}
div:nth-child(12) {
cursor: vertical-text;
}
div:nth-child(13) {
cursor: alias;
}
div:nth-child(14) {
cursor: copy;
}
div:nth-child(15) {
cursor: move;
}
div:nth-child(16) {
cursor: no-drop;
}
div:nth-child(17) {
cursor: not-allowed;
}
div:nth-child(18) {
cursor: all-scroll;
}
div:nth-child(19) {
cursor: col-resize;
}
div:nth-child(20) {
cursor: row-resize;
}
div:nth-child(21) {
cursor: n-resize;
}
div:nth-child(22) {
cursor: s-resize;
}
div:nth-child(23) {
cursor: e-resize;
}
div:nth-child(24) {
cursor: w-resize;
}
div:nth-child(25) {
cursor: ns-resize;
}
div:nth-child(26) {
cursor: ew-resize;
}
div:nth-child(27) {
cursor: ne-resize;
}
div:nth-child(28) {
cursor: nw-resize;
}
div:nth-child(29) {
cursor: se-resize;
}
div:nth-child(30) {
cursor: sw-resize;
}
div:nth-child(31) {
cursor: nesw-resize;
}
div:nth-child(32) {
cursor: nwse-resize;
}
div:nth-child(33) {
cursor: zoom-in;
}
div:nth-child(34) {
cursor: zoom-out;
}
div:nth-child(35) {
cursor: url("../img/icono.png"), auto;
}
