首頁 > 硬體

css如何設定滑鼠指標；css如何設定滑鼠手指

2020-10-12 21:27:28

在前端頁面開發中，為了提高使用者體驗，方便使用者操作，常常對一些點選可以開啟新頁面的或開啟新功能的文字加上一個滑鼠指標。
css如何設定滑鼠指標呢？只需要對需要設定滑鼠指標的文字加上一個 cursor: pointer 即可實現。

操作方法

  • 01

    開啟前端開發軟體，新建一個html內碼錶面。如圖：

  • 02

    在新建的html內碼錶面上找到<body>,在這個<body>標籤裡建立一個標籤，a案例中使用的是<a>。
    程式碼：
    <a href="">
    大家好，滑鼠放到我身上就可看到效果
    </a>

  • 03

    為新家<a>新增滑鼠指標為手指樣式。在html內碼錶面中找到<tilte>,在這個<title>後面建立一個<style>，然後在<style>中新建一個樣式類，最後為這個樣式類新增滑鼠指標樣式。
    程式碼：
    <style type="text/css">
    .pointer{
    cursor: pointer;
    }
    </style>

  • 04

    把滑鼠指標樣式新增到<a>標籤上。如圖：
    新增後的程式碼：
    <a href="" class="pointer">
    大家好，滑鼠放到我身上就可看到效果
    </a>

  • 05

    儲存html程式碼後使用瀏覽器開啟，當滑鼠滑過<a>上的文字後即可看到滑鼠變為了指標狀態。

  • 06

    可以直接複製以下程式碼到新建的html檔案上，貼上儲存後使用瀏覽器開啟即可看到效果。
    所有程式碼：
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title>css設定滑鼠指標</title>
    <style type="text/css">
    .pointer{
    cursor: pointer;
    }
    </style>
    </head>
    <body>
    <a href="" class="pointer">
    大家好，滑鼠放到我身上就可看到效果
    </a>
    </body>
    </html>

  • End

相關文章

IT145.com E-mail:sddin#qq.com