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>

列印頁面