css cursor 的可选值（鼠标的各种样式）

CSS的cursor属性用于指定鼠标在元素上的样式，它可以控制当鼠标悬停在某个元素上时它的外观表现。下面是所有可选值的详细攻略。

可选值

auto：默认值，浏览器自动设置光标。
default：浏览器默认光标。
none：无光标。
pointer：手势光标，通常用于链接。
progress：忙碌或进行操作，通常用于指示页面正在加载中。
wait：等待，通常用于指示操作正在进行中。
help：帮助，通常用于指示有关操作或某个元素的附加信息。
text：文本光标，常用于可编辑文本区域。
crosshair：十字线光标，通常可用于某些绘图应用程序中。
move：移动光标，用于拖拽元素或调整大小等场景。
not-allowed：禁止，通常用于指示无法执行的操作或操作不允许的情况。

示例

例子一：自定义光标

前提条件：准备好一个名为my-cursor.cur的光标文件，可以使用在线工具制作。

在CSS中指定自己的光标样式：

.my-cursor {
  cursor: url(my-cursor.cur), auto;
}

例子二：手写板

在一个小的示例中，我们可以创建一个可以绘制图形的"画布"，并使用CSS将鼠标样式更改为"none"以隐藏光标。

<!DOCTYPE html>
<html>
<head>
  <title>Handwritten Board</title>
  <style>
    #canvas {
      width: 500px;
      height: 300px;
      background-color: white;
      border: 1px solid black;
      cursor: none;
    }
  </style>
  <script>
    window.addEventListener("load", () => {
      let canvas = document.querySelector("#canvas");
      let context = canvas.getContext("2d");

      let isDrawing = false;
      let lastX = 0;
      let lastY = 0;

      canvas.addEventListener("mousedown", (event) => {
        isDrawing = true;
        [lastX, lastY] = [event.offsetX, event.offsetY];
      });

      canvas.addEventListener("mousemove", (event) => {
        if (isDrawing) {
          let x = event.offsetX;
          let y = event.offsetY;
          context.beginPath();
          context.moveTo(lastX, lastY);
          context.lineTo(x, y);
          context.stroke();
          [lastX, lastY] = [x, y];
        }
      });

      canvas.addEventListener("mouseup", () => isDrawing = false);
      canvas.addEventListener("mouseout", () => isDrawing = false);
    });
  </script>
</head>
<body>
  <canvas id="canvas"></canvas>
</body>
</html>

以上代码中，我们将鼠标样式设置为none，这会隐藏鼠标光标。然后使用JavaScript监听在画布上的mousedown、mousemove和mouseup事件，通过CanvasRenderingContext2D方法绘制图形。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：css cursor 的可选值（鼠标的各种样式） - Python技术站

css cursor 的可选值（鼠标的各种样式）

可选值

示例

例子一：自定义光标

例子二：手写板

相关文章