Tailwind CSS - 光标

Tailwind CSS 光标 提供了预定义类，用于控制光标悬停在元素上时的外观。

Tailwind CSS Cursor 光标类

以下是 Tailwind CSS 光标类的列表，这些类可以更改光标样式，例如指针、文本等。

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>