資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何使用 CSS 使滑鼠懸停在列表項上時游標變成手型？
通常，當我們將滑鼠懸停在 HTML 文件中的元素上時，如果懸停在文字上，游標預設顯示為箭頭或選擇器。但是，我們可以使用 CSS 屬性將懸停在所選元素上的游標行為更改為任何型別的可用游標型別。
現在讓我們討論並瞭解如何使用 :hover 狀態和 CSS 的 cursor 屬性來更改滑鼠懸停在特定元素上的游標行為。
Cursor 屬性
CSS 中的 cursor 屬性具有許多游標行為型別。通常，它與 hover 狀態一起使用，以顯示游標行為的一些差異，並吸引使用者對該元素的注意力。它具有許多游標型別的選項，但是，在這個例子中，我們只討論將滑鼠懸停在列表中的特定元素上時將游標更改為手型。
預設游標可以更改為兩種手型游標：
Grab（抓取）
Pointer（指標）
讓我們透過在 JavaScript 程式碼示例中實際實現它來詳細瞭解它。
步驟
步驟 1 - 在第一步中，我們將使用任何型別的 HTML 列表元素建立一個不同的專案列表。
步驟 2 - 在下一步中，我們將為所有列表 (<li>) 元素分配一個類。
步驟 3 - 在這一步中，我們將使用上一步中給出的類獲取所有列表項，然後使用 hover 狀態將滑鼠懸停在這些列表項上時更改游標。
示例
下面的示例將解釋如何將滑鼠懸停在特定列表項上時將游標更改為指標：
<html>
<head>
<style>
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: aqua;
}
.list_container {
padding: 0;
background-color: bisque;
list-style: none;
}
.list_items {
padding: 5px;
border-bottom: 2px solid #444;
}
.list_items:last-child {
border-bottom: none;
}
.list_items:hover {
cursor: pointer;
}
</style>
</head>
<body>
<div class = "container">
<h3> Making the cursor to hand when a user hovers over a list item using CSS </h3>
<h4> List of a few vegatables: </h4>
<ul class = "list_container">
<li class = "list_items"> Potato </li>
<li class = "list_items"> Tomato </li>
<li class = "list_items"> Onion </li>
<li class = "list_items"> Cabbage </li>
<li class = "list_items"> Lady Finger </li>
</ul>
</div>
</body>
</html>
在上面的示例中，我們看到了如何將滑鼠懸停在列表項上時更改游標型別。一旦你將滑鼠懸停在任何列表項上，游標將從箭頭自動更改為指標。
現在讓我們討論另一個程式碼示例，以實現並將游標行為更改為抓取（grab）狀態，當滑鼠懸停在列表項上時。
此示例的演算法與前一個示例的演算法相同，你只需要在列表項的 hover 狀態 CSS 中將游標型別從指標（pointer）更改為抓取（grab）。
示例
下面的示例將實現並將游標行為更改為抓取和指標，而不是箭頭：
<html>
<head>
<style>
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: aqua;
}
.list_container {
padding: 0;
background-color: bisque;
list-style: none;
}
.list_items {
padding: 5px;
border-bottom: 2px solid #444;
}
.list_items:last-child {
border-bottom: none;
}
.list_items:nth-child(odd):hover {
cursor: pointer;
}
.list_items:nth-child(even):hover {
cursor: grab;
}
</style>
</head>
<body>
<div class = "container">
<h3> Making the cursor to hand when a user hovers over a list item using CSS </h3>
<h4> List of a few vegatables: </h4>
<ul class = "list_container">
<li class = "list_items"> Potato </li>
<li class = "list_items"> Tomato </li>
<li class = "list_items"> Onion </li>
<li class = "list_items"> Cabbage </li>
<li class = "list_items"> Lady Finger </li>
</ul>
</div>
</body>
</html>
上面的示例將預設游標的行為從箭頭更改為抓取和指標。當滑鼠懸停在偶數列表項上時，它會將游標行為更改為抓取（grab）型別；當滑鼠懸停在奇數列表項上時，它會將游標更改為指標。
結論
在本文中，我們透過程式碼示例實現了兩種不同的方法來將游標從箭頭更改為手型。在第一個示例中，游標從箭頭更改為指標，而在下一個示例中，它在某些選定的列表項上更改為指標和抓取。
瀏覽量 153
