如何將遊標樣式設定為沒有 href 的連結的指針？
- 王林轉載
- 2023-08-24 12:13:02610瀏覽
我們可以使用HTML中的標籤來新增網頁的連結。 元素的預設遊標樣式是指針，但從 標記中刪除 href 屬性會變更遊標樣式。
因此，在本教程中，我們將學習在沒有 href 屬性的情況下將遊標樣式保持為 標記的指標。
使用者可以按照下面的範例查看元素的預設遊標樣式
範例
在下面的範例中，我們使用 標記來建立三個不同的連結。
在輸出中，我們可以觀察到，當我們將滑鼠懸停在第一個連結上時，遊標變成指針，因為它包含href 屬性；對於第二個鏈接，遊標也變成一個指針，因為它還包含一個帶有有空字串值的href 屬性，當我們將滑鼠懸停在第三個連結上時，遊標樣式會發生變化，因為它不包含href 屬性。
<html> <body> <h2>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>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>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>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>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中文網其他相關文章！