Apply custom cursor on hover

by Tristen Brown

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Cursor Example</title>
<style>
  body {
    display: flex;
    gap: 2rem;
    padding: 2rem;
    font-family: sans-serif;
  }

  .box {
    width: 200px;
    height: 200px;
    background: lightgray;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #ccc;
    font-size: 1.2rem;
    cursor: default;
  }

  .one:hover {
    cursor: url('https://placecats.com/neo/16/16') 16 16, auto;
  }

  .two:hover {
    cursor: url('https://placecats.com/millie/16/16') 16 16, auto;
  }
</style>
</head>
<body>

<div class="box one">Hover me (Cursor 1)</div>
<div class="box two">Hover me (Cursor 2)</div>

</body>
</html>