要使鼠標懸浮在按鈕上時變成手指形狀(表示這是一個可點擊的區域),可以使用 CSS 的 cursor
屬性來實現。
css復制代碼.button { cursor: pointer; /* 鼠標懸浮時顯示手指形狀 */}
html復制代碼<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>懸浮變手指示例</title> <link rel="stylesheet" href="styles.css"></head><body> <button class="button">點擊我</button></body></html>
css復制代碼/* styles.css */.button { padding: 10px 20px; font-size: 16px; background-color: #3498db; color: white; border: none; border-radius: 5px; cursor: pointer; /* 鼠標懸浮時顯示手指形狀 */ transition: background-color 0.3s; }.button:hover { background-color: #2980b9; /* 鼠標懸浮時按鈕變暗 */}
cursor: pointer;
:設置鼠標懸浮在元素上時,光標變為手指形狀,表示該元素是可點擊的。
.button:hover
:使用偽類 :hover
來設置鼠標懸浮效果,這里使背景色變暗,進一步增強了用戶的交互體驗。
當鼠標懸浮在按鈕上時,光標會變成手指形狀,同時按鈕的背景色會變暗,提示用戶該按鈕是可以點擊的。