如何將遊標樣式設定為沒有 href 的連結的指針？-js教程-PHP中文網

首頁

web前端

js教程

如何將遊標樣式設定為沒有 href 的連結的指針？

王林

Aug 24, 2023 pm 12:13 PM

如何将光标样式设置为没有 href 的链接的指针？

我們可以使用HTML中的標籤來新增網頁的連結。元素的預設遊標樣式是指針，但從標記中刪除 href 屬性會變更遊標樣式。

因此，在本教程中，我們將學習在沒有 href 屬性的情況下將遊標樣式保持為標記的指標。

使用者可以按照下面的範例查看元素的預設遊標樣式

範例

在下面的範例中，我們使用標記來建立三個不同的連結。

在輸出中，我們可以觀察到，當我們將滑鼠懸停在第一個連結上時，遊標變成指針，因為它包含href 屬性；對於第二個鏈接，遊標也變成一個指針，因為它還包含一個帶有有空字串值的href 屬性，當我們將滑鼠懸停在第三個連結上時，遊標樣式會發生變化，因為它不包含href 屬性。

<html>
<body>
   <h2 id="Cursor-pointer-on-the-anchor-texts">Cursor pointer on the anchor texts</h2>
   <a href = "https://www.tutorialspoint.com/index.htm"> tutorialspoint</a>
   <br> <br>
   <a href = ""> Cursor pointer </a>
   <br> <br>
   <a> No cursor pointer </a>
</body>
</html>

現在，使用者了解了當我們從標記中刪除 href 屬性時間標籤樣式如何變化。

下面，我們將看一下為沒有 href 屬性的連結設定遊標指標的範例。

文法

使用者可以依照下面的語法，使用 css 將遊標指標設定為不含 href 屬性的連結。

<style>
  .pointer {
     cursor: pointer;
   }
</style>

在上面的語法中，「pointer」是分配給元素的類，我們更改了包含「pointer」類別的元素的指標樣式。

範例

在下面的範例中，我們建立了兩個不同的元素，並將「pointer」類別指派給這兩個元素。在部分，我們加入了網頁的內嵌樣式。我們在

<html>
<head> 
   <style>
      .pointer {
         cursor: pointer;
      }
   </style>
</head>
<body>
   <h2 id="Using-the-CSS-to-set-the-cursor-pointer-on-the-anchor-texts-in-the-link-without-the-href-attribute">Using the CSS to set the cursor pointer on the anchor texts in the link without the href attribute </h2>
   <a class = "pointer"> cursor pointer </a>
   <br> <br>
   <a class = "pointer"> No href attribute </a>
</body>
</html>

範例

在下面的範例中，我們使用「cursor:pointer」樣式將不帶href 屬性的元素的遊標樣式設定為指針，如範例2 所示，但我們已將內聯CSS 套用到標記。

<html>
<body>
   <h3 id="Using-the-inline-CSS-to-set-cursor-pointer-on-the-anchor-texts-in-the-link-without-the-href-attribute">Using the inline CSS to set cursor pointer on the anchor texts in the link without the href attribute. </h3>
   <a style = "cursor: pointer;"> cursor pointer </a>
</body>
</html>

範例

在下面的範例中，我們使用了「onmouseover」事件屬性。每當滑鼠指標移到標記上時，它就會呼叫分配給它的回調函數。在這裡，我們分配了一行 CSS，而不是分配回調函數。

因此，每當使用者將滑鼠停留在不含 href 屬性的標記上時，都會將遊標樣式設為指標。

<html>
<body>
   <h3 id="Using-the-onmouseover-event-and-css-to-add-cursor-pointer-on-the-anchor-texts-in-the-link-without-herf-attribute">Using the onmouseover event and css to add cursor pointer on the anchor texts in the link without herf attribute </h3>
   <a onmouseover = "this.style.cursor='pointer'"> Link 1 </a> <br>
   <a onmouseover = "this.style.cursor='pointer'"> Link 2 </a> <br>
   <a onmouseover = "this.style.cursor='pointer'"> Link 3 </a> <br>
   <a onmouseover = "this.style.cursor='pointer'"> Link 4 </a> <br>
</body>
</html>

範例

在下面的範例中，我們使用了帶有 href 屬性的標記，但我們已將空字串指定為 href 屬性的值。因此，它會自動充當空連結並為標記設定遊標指標。

<html>
<body>
   <h3 id="Assigning-the-empty-value-to-the-href-attribute-to-add-cursor-pointer-i-on-the-anchor-texts">Assigning the empty value to the href attribute to add cursor pointer </i> on the anchor texts</h3>
   <a href = ""> Link 1 </a> <br>
   <a href = ""> Link 2 </a> <br>
</body>
</html>

在本教程中，我們學習如何將遊標樣式設定為不含 href 屬性的連結上的指標。我們使用 CSS 來更改遊標樣式。此外，我們還使用 onmouseover 事件屬性來偵測滑鼠懸停事件並相應地更改遊標樣式。

以上是如何將遊標樣式設定為沒有 href 的連結的指針？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文轉載於：tutorialspoint。如有侵權，請聯絡admin@php.cn刪除

Python和JavaScript的未來：趨勢和預測Apr 27, 2025 am 12:21 AM

Python和JavaScript的未來趨勢包括：1.Python將鞏固在科學計算和AI領域的地位，2.JavaScript將推動Web技術發展，3.跨平台開發將成為熱門，4.性能優化將是重點。兩者都將繼續在各自領域擴展應用場景，並在性能上有更多突破。

Python vs. JavaScript：開發環境和工具Apr 26, 2025 am 12:09 AM

Python和JavaScript在開發環境上的選擇都很重要。 1)Python的開發環境包括PyCharm、JupyterNotebook和Anaconda，適合數據科學和快速原型開發。 2)JavaScript的開發環境包括Node.js、VSCode和Webpack，適用於前端和後端開發。根據項目需求選擇合適的工具可以提高開發效率和項目成功率。

JavaScript是用C編寫的嗎？檢查證據Apr 25, 2025 am 12:15 AM

是的，JavaScript的引擎核心是用C語言編寫的。 1）C語言提供了高效性能和底層控制，適合JavaScript引擎的開發。 2）以V8引擎為例，其核心用C 編寫，結合了C的效率和麵向對象特性。 3）JavaScript引擎的工作原理包括解析、編譯和執行，C語言在這些過程中發揮關鍵作用。

JavaScript的角色：使網絡交互和動態Apr 24, 2025 am 12:12 AM

JavaScript是現代網站的核心，因為它增強了網頁的交互性和動態性。 1)它允許在不刷新頁面的情況下改變內容，2)通過DOMAPI操作網頁，3)支持複雜的交互效果如動畫和拖放，4)優化性能和最佳實踐提高用戶體驗。

C和JavaScript：連接解釋Apr 23, 2025 am 12:07 AM

C 和JavaScript通過WebAssembly實現互操作性。 1）C 代碼編譯成WebAssembly模塊，引入到JavaScript環境中，增強計算能力。 2）在遊戲開發中，C 處理物理引擎和圖形渲染，JavaScript負責遊戲邏輯和用戶界面。

從網站到應用程序：JavaScript的不同應用Apr 22, 2025 am 12:02 AM

JavaScript在網站、移動應用、桌面應用和服務器端編程中均有廣泛應用。 1)在網站開發中，JavaScript與HTML、CSS一起操作DOM，實現動態效果，並支持如jQuery、React等框架。 2)通過ReactNative和Ionic，JavaScript用於開發跨平台移動應用。 3)Electron框架使JavaScript能構建桌面應用。 4)Node.js讓JavaScript在服務器端運行，支持高並發請求。

Python vs. JavaScript：比較用例和應用程序Apr 21, 2025 am 12:01 AM

Python更適合數據科學和自動化，JavaScript更適合前端和全棧開發。 1.Python在數據科學和機器學習中表現出色，使用NumPy、Pandas等庫進行數據處理和建模。 2.Python在自動化和腳本編寫方面簡潔高效。 3.JavaScript在前端開發中不可或缺，用於構建動態網頁和單頁面應用。 4.JavaScript通過Node.js在後端開發中發揮作用，支持全棧開發。