大桥未久黑人强制中出,精品欧洲无码Av一区二区,国产成人福利在线

CSS（層疊樣式表）是設計網站視覺外觀的強大工具，包括光標樣式。光標是網頁設計的重要方面。它有助于向用戶提供視覺反饋，并使他們能夠有效地進行交互。

什么是光標？

光標是一個位置指示器，用于指示用戶在屏幕上的當前位置。它也被稱為“插入符號”。它在用戶界面設計中起著重要作用。在CSS中，我們可以根據需要設置光標，以向用戶提供視覺反饋，指示可以在特定位置執行的操作。

語法

css selector {
   courser : courser type;
}

登錄后復制

現在，我們將探索可以使用CSS設置的不同類型的光標

默認光標

在網頁設計中，默認光標是最常見的光標類型，當沒有指定其他光標時使用。它在屏幕上看起來像一個箭頭指針，表示用戶可以點擊該元素。

示例1

這里有一個設置默認光標的示例。

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         text-align: center;
      }
      a {
         cursor: default;
      }
   </style>
</head>
<body>
   <h2>This is an example of default cursor</h2>
   <a  class="my-link">Click Here</a>
</body>
</html>

登錄后復制

指針光標

指針光標由一個指向鏈接的手表示。當用戶懸停在鏈接上時，它表示該元素可點擊。我們可以使用下面的代碼來設置指針光標 ?

css-elector {
   cursor: pointer;
}

登錄后復制

文本光標

文本光標是一個閃爍的水平或垂直線，它以I型光標指針的形式顯示。當用戶懸停在文本或文本輸入字段上時，它表示他們已編輯或選擇了文本。我們可以使用以下代碼來設置文本光標 –

css-elector {
   cursor: text;
}

登錄后復制

十字準心光標

十字準星光標只是顯示為十字準星指針的水平和垂直線。十字準星光標用于在屏幕上選擇特定區域，如圖像編輯工具中。我們可以使用以下代碼設置十字準星光標 –

css-elector {
   cursor: crosshair;
}

登錄后復制

移動光標

移動光標以四個箭頭指針的形式出現在屏幕上。它通常用于拖放元素，表示它可以移動。我們可以使用以下代碼來設置移動光標 –

css-elector {
   cursor: move;
}

登錄后復制

不允許的光標

不允許的光標表示請求的操作將不會執行。它以一個帶有對角線的圓圈的形式出現。我們可以使用以下代碼來設置不允許的光標 –

css-elector {
   cursor: not-allowed;
}

登錄后復制

進度光標

進度光標以旋轉的圓圈形式顯示。它表示程序在后臺忙碌，但用戶仍然可以與界面交互。我們可以使用以下代碼來設置進度光標 –

css-elector {
   cursor: progress;
}

登錄后復制

等待光標

等待光標顯示為旋轉的風車。它表示程序正在忙碌中，無法與用戶界面進行交互。我們可以使用以下代碼來設置等待光標 –

css-elector {
   cursor: wait;
}

登錄后復制

幫助光標

幫助光標顯示為一個問號指針。當用戶需要幫助時，例如點擊幫助圖標或按鈕時使用。我們可以使用以下代碼設置幫助光標 –

css-elector {
   cursor: help;
}

登錄后復制

示例2

Here is an example of how to set the different types of cursors using CSS.

<!DOCTYPE html>
<html>
<head>
   <style>
      body{
         text-align:center;
         background-color: lightgreen;
      }
      div{
         margin: 3px;
         padding: 5px;
      }
   </style>
</head>
<body>
   <h2>Setting the different types of cursors using CSS</h2>
   <h3>Move the mouse over the words to see the cursor change:</h3>
   <div style="cursor:default">Default</div>
   <div style="cursor:text">Text</div>
   <div style="cursor:pointer">Pointer</div>
   <div style="cursor:crosshair">Crosshair</div>
   <div style="cursor:move">Move</div>
   <div style="cursor:not-allowed">not-allowed</div>
   <div style="cursor:progress">Progressd</div>
   <div style="cursor:wait">wait</div>
   <div style="cursor:help">help</div>
   <div style="cursor:e-resize">e-resize</div>
   <div style="cursor:ne-resize">ne-resize</div>
   <div style="cursor:nw-resize">nw-resize</div>
   <div style="cursor:n-resize">n-resize</div>
   <div style="cursor:se-resize">se-resize</div>
   <div style="cursor:sw-resize">sw-resize</div>
   <div style="cursor:s-resize">s-resize</div>
   <div style="cursor:w-resize">w-resize</div>
</body>
</html>

登錄后復制

使用CSS自定義光標

除了CSS提供的標準光標外，我們還可以使用自定義光標。通過使用自定義光標，我們可以為網站增添獨特的風格。

示例 3

以下是使用CSS創建自定義光標的示例。

<!DOCTYPE html>  
<html>  
<head>
   <style>
      body{
         text-align: center;
      }
      .my-cursor {
         width: 200px;
         margin: auto;
         background-color: lightblue;
         cursor: url(https://cdn.icon-icons.com/icons2/1875/PNG/96/cursor_120340.png), auto;
      }
   </style>
</head>
<body>
   <h2>Custom Cursors with CSS</h2>
   <div class="my-cursor">
      <h3>Move the mouse over to see the cursor change</h3>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text </p>
   </div>
</body>
</html>

登錄后復制

In the above example, we have created a div element with a class of my-cursor. We then set the cursor property to?URL (
https://cdn.icon-icons.com/icons2/1875/PNG/96/cursor_120340.png), auto。這意味著瀏覽器將cursor_120340.png文件用作自定義光標，如果找不到或加載文件失敗，則回退到默認光標。