Tailwind CSS - 鼠标指针

Tailwind CSS **鼠标指针** 提供预定义的类，用于控制将鼠标悬停在元素上时鼠标指针的外观。

Tailwind CSS 鼠标指针类

下面列出了 Tailwind CSS 鼠标指针类，这些类可以更改鼠标指针样式，例如指针、文本等等。

类	CSS 属性
cursor-auto	cursor: auto;
cursor-default	cursor: default;
cursor-pointer	cursor: pointer;
cursor-wait	cursor: wait;
cursor-text	cursor: text;
cursor-move	cursor: move;
cursor-help	cursor: help;
cursor-not-allowed	cursor: not-allowed;
cursor-none	cursor: none;
cursor-context-menu	cursor: context-menu;
cursor-progress	cursor: progress;
cursor-cell	cursor: cell;
cursor-crosshair	cursor: crosshair;
cursor-vertical-text	cursor: vertical-text;
cursor-alias	cursor: alias;
cursor-copy	cursor: copy;
cursor-no-drop	cursor: no-drop;
cursor-grab	cursor: grab;
cursor-grabbing	cursor: grabbing;
cursor-all-scroll	cursor: all-scroll;
cursor-col-resize	cursor: col-resize;
cursor-row-resize	cursor: row-resize;
cursor-n-resize	cursor: n-resize;
cursor-e-resize	cursor: e-resize;
cursor-s-resize	cursor: s-resize;
cursor-w-resize	cursor: w-resize;
cursor-ne-resize	cursor: ne-resize;
cursor-nw-resize	cursor: nw-resize;
cursor-se-resize	cursor: se-resize;
cursor-sw-resize	cursor: sw-resize;
cursor-ew-resize	cursor: ew-resize;
cursor-ns-resize	cursor: ns-resize;
cursor-nesw-resize	cursor: nesw-resize;
cursor-nwse-resize	cursor: nwse-resize;
cursor-zoom-in	cursor: zoom-in;
cursor-zoom-out	cursor: zoom-out;

Tailwind CSS 鼠标指针类的功能

**cursor-auto:** 将光标设置为浏览器的默认行为。
**cursor-default:** 显示默认的箭头光标。
**cursor-pointer:** 将光标更改为手形图标，以指示可点击元素。
**cursor-wait:** 显示等待光标（例如旋转的轮子），表明用户应该等待。
**cursor-text:** 显示文本选择光标，用于选择文本。
**cursor-move:** 显示带有箭头的光标，用于移动元素。
**cursor-help:** 显示帮助光标，通常是一个问号。
**cursor-not-allowed:** 设置光标以指示不允许该操作。
**cursor-none:** 完全隐藏光标。
**cursor-context-menu:** 显示光标以表明上下文菜单可用。
**cursor-progress:** 显示进度光标（例如旋转的圆圈），以指示正在进行的活动。
**cursor-cell:** 将光标设置为单元格图标。
**cursor-crosshair:** 显示十字准星光标，用于绘图等任务。
**cursor-vertical-text:** 设置光标以指示可以选择垂直文本。
**cursor-alias:** 显示光标，指示链接或快捷方式可用。
**cursor-copy:** 将光标更改为复制图标。
**cursor-no-drop:** 显示光标，表明元素不可放置。
**cursor-grab:** 设置光标以指示元素可以被抓取。
**cursor-grabbing:** 显示正在拖动元素。
**cursor-all-scroll:** 显示允许所有方向滚动的光标。
**cursor-*-resize:** 显示不同方向的不同调整大小的光标。
**cursor-zoom-in:** 设置光标以指示放大。
cursor-zoom-out： 将光标设置为缩小指示。

在 cursor-*-resize 中，'*' 可以替换为方向指示符，例如 n、e、s、w、ne、nw、se、sw、ew、ns、nesw、nwse、col 或 row，以指定调整大小的方向。

Tailwind CSS 光标类示例

以下是 Tailwind CSS 光标类的示例，这些示例展示了如何将不同的光标样式应用于元素（例如指针、文本等），以改善用户交互。

不同的光标样式

此示例演示了如何使用 Tailwind CSS 光标类应用不同的光标样式。使用 cursor-* 实用程序根据您的需要调整光标外观。

示例

  
<!DOCTYPE html>
<html lang="en">
<head> 
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-3">
    <h2 class="text-2xl font-bold mb-6">
        Tailwind CSS Cursor
    </h2>
    <h3 class="font-bold underline mb-4">
        Hover over the boxes to see different cursor styles.
    </h3>
    <div class="grid grid-cols-4 gap-4">
        <div class="p-2 border border-teal-300 cursor-auto 
            bg-gray-100">
            <p>auto</p>
        </div> 
        <div class="p-2 border border-teal-300 cursor-pointer 
            bg-gray-100">
            <p>pointer</p>
        </div>
        <div class="p-2 border border-teal-300 cursor-wait 
            bg-gray-100">
            <p>wait</p>
        </div>
        <div class="p-2 border border-teal-300 cursor-text 
            bg-gray-100">
            <p>text</p>
        </div>
        <div class="p-2 border border-teal-300 cursor-move 
            bg-gray-100">
            <p>move</p>
        </div>
        <div class="p-2 border border-teal-300 cursor-help 
            bg-gray-100">
            <p>help</p>
        </div>
        <div class="p-2 border border-teal-300 cursor-none 
            bg-gray-100">
            <p>none</p>
        </div>
        <div class="p-2 border border-teal-300 cursor-crosshair 
            bg-gray-100">
            <p>crosshair</p>
        </div>
        <div class="p-2 border border-teal-300 cursor-grab 
            bg-gray-100">
            <p>grab</p>
        </div>
        <div class="p-2 border border-teal-300 cursor-grabbing 
            bg-gray-100">
            <p>grabbing</p>
        </div>
        <div class="p-2 border border-teal-300 cursor-zoom-in 
            bg-gray-100">
            <p>zoom-in</p>
        </div>
        <div class="p-2 border border-teal-300 cursor-zoom-out 
            bg-gray-100">
            <p>zoom-out</p>
        </div>
    </div>
    <p class="mt-6">Use <strong>cursor-*</strong> 
        classes to apply different cursor styles.
    </p>
</body>

</html>

调整大小的光标样式

此示例演示了如何使用 Tailwind CSS 光标类应用各种调整大小的光标样式。将鼠标悬停在方框上以查看不同的调整大小光标，并根据需要使用 cursor-*-resize 类修改光标样式。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-2xl font-bold mb-6">
        Tailwind CSS Cursor</h2>
    <h3 class="font-bold underline mb-4">
        Hover to see resize cursors:
    </h3>
    <div class="grid grid-cols-2 gap-4">
        <div class="p-2 border border-pink-300 cursor-n-resize 
            flex justify-center">
            <p>n-resize</p>
        </div>
        <div class="p-2 border border-pink-300 cursor-e-resize 
            flex justify-center">
            <p>e-resize</p>
        </div>
        <div class="p-2 border border-teal-300 cursor-ne-resize 
            flex justify-center">
            <p>ne-resize</p>
        </div>
        <div class="p-2 border border-teal-300 cursor-nw-resize 
            flex justify-center">
            <p>nw-resize</p>
        </div>
        <div class="p-2 border border-rose-400 cursor-nesw-resize 
            flex justify-center">
            <p>nesw-resize</p>
        </div>
        <div class="p-2 border border-rose-400 cursor-nwse-resize 
            flex justify-center">
            <p>nwse-resize</p>
        </div>
    </div>
    <p class="mt-4">Use <strong>cursor-*-resize</strong> 
        for resize styles.
    </p>
</body>

</html>

打印页面