CSS - 游标属性

上一页
下一页

CSS cursor 属性决定了鼠标悬停在应用此属性的元素上时的外观。其主要目的是通过视觉方式表示某些功能来提高可用性。

语法

cursor: value;

属性值

值 描述
auto 显示的游标由用户代理根据当前上下文确定。这是浏览器用于定义游标的默认属性。
alias 显示的游标是别名游标，表示需要生成别名或快捷方式。
all-scroll 显示的游标表示已完成滚动。
cell 显示的游标是单元格游标，表示可以选择表格单元格或单元格组。
col-resize 显示的游标是列调整大小游标，表示元素或列可能会进行水平调整大小，通常表示为左右指向的箭头，用垂直线隔开。
copy 显示的游标是复制游标，表示需要创建某个内容的副本。
crosshair 显示的游标是十字准星游标，通常用于指示位图中元素的选择。
default 默认游标，根据平台而异，通常显示为箭头。
e-resize 显示的游标是南向调整大小游标，表示南侧可以移动或偏移。
ew-resize 显示的游标是东西向调整大小游标，表示双向调整大小的游标。
grab 显示的游标是抓取游标，表示可以抓取元素并将其拖动以重新定位。
grabbing 显示的游标是抓取游标，表示正在握住或拉动某物以方便其移动。
help 显示的游标是帮助游标，表示可以访问帮助信息。
move 显示的游标是移动游标，表示可以重新定位某物。
n-resize 显示的游标是北向调整大小游标，表示北侧可以移动或偏移。
ne-resize 显示的游标是东北向调整大小游标，表示双向调整大小的游标。
nw-resize 显示的游标是西北向调整大小游标，表示双向调整大小的游标。
ns-resize 显示的游标是南北向调整大小游标，表示双向调整大小的游标。
nesw-resize 显示的游标是东北西南向调整大小游标，表示双向调整大小的游标。
nwse-resize 显示的游标是西北东南向调整大小游标，表示双向调整大小的游标。
no-drop 显示的游标是禁止放置游标，表示可能无法在其当前位置放置项目。
not-allowed 显示的游标是禁止游标，表示不会执行请求的操作。
pointer 显示的游标是指针游标，表示游标用作指向超链接的指示器。
progress 显示的游标是进度游标，表示程序正在执行后台任务，允许用户继续与界面交互，而不必等待其完成。
row-resize 显示的游标是行调整大小游标，表示元素或行可能会进行垂直调整大小，通常表示为向上和向下指向的箭头，用水平线隔开。
s-resize 显示的游标是南向调整大小游标，表示南侧可以移动或偏移。
se-resize 显示的游标是东南向调整大小游标，表示双向调整大小的游标。
sw-resize 显示的游标是西南向调整大小游标，表示双向调整大小的游标。
text 显示的游标是文本游标，表示您可以选择通常由 I 形游标指示的文本。
URL 显示的游标是由逗号分隔的 URL 指定的图像，如果图像无法使用，还必须在 URL 的末尾提供通用游标。
wait 显示的游标是等待游标，程序当前正忙，用户无法与界面交互，这种状态有时用沙漏或手表图像表示。
w-resize 显示的游标是西向调整大小游标，表示西侧可以移动或偏移。
zoom-in 显示的游标是放大游标，表示可以通过缩放放大对象。
zoom-out 显示的游标是缩小游标，表示可以通过缩放缩小对象。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

CSS 游标属性示例

以下示例演示了具有不同值的cursor 属性。

所有游标的演示

以下示例显示了多个提到的游标的演示，要观察效果，请将鼠标悬停在每个块上。

示例

Open Compiler
<!DOCTYPE html>
<html>

<head>
   <style>
      .demo-cursor {
         text-align: center;
         display: inline-block;
         width: 100px;
         height: 100px;
         margin: 10px;
         border: 3px solid #ccc;
         cursor: pointer;
      }

      .demo-cursor:hover {
         background-color: lightgrey;
      }

      .default:hover {
         cursor: default;
      }

      .auto {
         cursor: auto;
      }

      .crosshair {
         cursor: crosshair;
      }

      .pointer {
         cursor: pointer;
      }

      .move {
         cursor: move;
      }

      .text {
         cursor: text;
      }

      .wait {
         cursor: wait;
      }

      .help {
         cursor: help;
      }

      .not-allowed {
         cursor: not-allowed;
      }

      .progress {
         cursor: progress;
      }

      .alias {
         cursor: alias;
      }

      .copy {
         cursor: copy;
      }

      .no-drop {
         cursor: no-drop;
      }

      .e-resize {
         cursor: e-resize;
      }

      .n-resize {
         cursor: n-resize;
      }

      .ne-resize {
         cursor: ne-resize;
      }

      .nw-resize {
         cursor: nw-resize;
      }

      .s-resize {
         cursor: s-resize;
      }

      .se-resize {
         cursor: se-resize;
      }

      .sw-resize {
         cursor: sw-resize;
      }

      .w-resize {
         cursor: w-resize;
      }

      .ew-resize {
         cursor: ew-resize;
      }

      .ns-resize {
         cursor: ns-resize;
      }

      .nesw-resize {
         cursor: nesw-resize;
      }

      .nwse-resize {
         cursor: nwse-resize;
      }

      .col-resize {
         cursor: col-resize;
      }

      .row-resize {
         cursor: row-resize;
      }

      .zoom-in {
         cursor: zoom-in;
      }

      .zoom-out {
         cursor: zoom-out;
      }

      .grab {
         cursor: grab;
      }

      .cell {
         cursor: cell;
      }

      .grabbing {
         cursor: grabbing;
      }

      .all-scroll {
         cursor: all-scroll;
      }
    </style>
</head>

<body>
   <h2>
      CSS cursor property
   </h2>
   <h3>
      All CSS Cursors, hover the mouse on the blocks.
   </h3>
   <div class="demo-cursor auto">
      <h3>
         Auto
      </h3>
   </div>
   <div class="demo-cursor alias">
      <h3>
         Alias
      </h3>
   </div>
   <div class="demo-cursor all-scroll">
      <h3>
         All-scroll
      </h3>
   </div>
   <div class="demo-cursor cell">
      <h3>
         cell
      </h3>
   </div>
   <div class="demo-cursor col-resize">
      <h3>
         col-resize
      </h3>
   </div>
   <div class="demo-cursor copy">
      <h3>
         Copy
      </h3>
   </div>
   <div class="demo-cursor crosshair">
      <h3>
         Crosshair
      </h3>
   </div>
   <div class="demo-cursor default">
      <h3>
         Default
      </h3>
   </div>
   <div class="demo-cursor e-resize">
      <h3>
         e-resize
      </h3>
   </div>
   <div class="demo-cursor ew-resize">
      <h3>
         ew-resize
      </h3>
   </div>
   <div class="demo-cursor grab">
      <h3>
         Grab
      </h3>
   </div>
   <div class="demo-cursor grabbing">
      <h3>
         Grabbing
      </h3>
   </div>
   <div class="demo-cursor help">
      <h3>
         Help
      </h3>
   </div>
   <div class="demo-cursor move">
      <h3>
         Move
      </h3>
   </div>
   <div class="demo-cursor n-resize">
      <h3>
         n-resize
      </h3>
   </div>
   <div class="demo-cursor ne-resize">
      <h3>
         ne-resize
      </h3>
   </div>
   <div class="demo-cursor nw-resize">
      <h3>
         nw-resize
      </h3>
   </div>
   <div class="demo-cursor ns-resize">
      <h3>
         ns-resize
      </h3>
   </div>
   <div class="demo-cursor nesw-resize">
      <h3>
         nesw-resize
      </h3>
   </div>
   <div class="demo-cursor nwse-resize">
      <h3>
         nwse-resize
      </h3>
   </div>
   <div class="demo-cursor no-drop">
      <h3>
         No-drop
      </h3>
   </div>
   <div class="demo-cursor not-allowed">
      <h3>
         Not-allowed
      </h3>
   </div>
   <div class="demo-cursor pointer">
      <h3>
         Pointer
      </h3>
   </div>
   <div class="demo-cursor progress">
      <h3>
         Progress
      </h3>
   </div>
   <div class="demo-cursor row-resize">
      <h3>
         row-resize
      </h3>
   </div>
   <div class="demo-cursor s-resize">
      <h3>
         s-resize
      </h3>
   </div>
   <div class="demo-cursor se-resize">
      <h3>
         se-resize
      </h3>
   </div>
   <div class="demo-cursor sw-resize">
      <h3>
         sw-resize
      </h3>
   </div>
   <div class="demo-cursor text">
      <h3>
         Text
      </h3>
   </div>
   <div class="demo-cursor wait">
      <h3>
         Wait
      </h3>
   </div>
   <div class="demo-cursor w-resize">
      <h3>
         w-resize
      </h3>
   </div>
   <div class="demo-cursor zoom-in">
      <h3>
         Zoom-in
      </h3>
   </div>
   <div class="demo-cursor zoom-out">
      <h3>
         Zoom-out
      </h3>
   </div>

</body>

</html>

将图像设置为游标

图像也可以用作游标，必须提及所需图像的 URL。这在以下示例中显示。

示例

Open Compiler
<!DOCTYPE html>
<html>

<head>
   <style>
      .demo-cursor {
         text-align: center;
         display: inline-block;
         background-color: lightgrey;
         width: 100px;
         height: 100px;
         margin: 10px;
         border: 3px solid #ccc;
         cursor: url(/css/images/try-it.jpg), pointer;
      }
   </style>
</head>

<body>
   <h2>
      CSS cursor property
   </h2>
   <h3>
      Hover over the block
   </h3>
   <div class="demo-cursor">
      <h3>
         Image Cursor
      </h3>
   </div>
   </div>
</body>

</html>

支持的浏览器

属性 Chrome Edge Firefox Safari Opera
cursor 5.0 5.5 4.0 5.0 9.6
css_properties_reference.htm
打印页面
上一页
下一页
广告