首頁 >web前端 >css教學 >滑鼠劃過字體時如何用css來實現字體變色? (程式碼實測)

滑鼠劃過字體時如何用css來實現字體變色? (程式碼實測)

藏色散人
藏色散人原創
2018-08-09 15:22:2015620瀏覽

當我們在瀏覽網頁時,滑鼠劃過某段文字會出現變色效果,這就是css字體變色,一方面是為了主動吸引人用戶目光去點擊,另一方面是為了防止用戶點擊錯其他文字段落。其實這種css滑鼠經過字體變色的效果是非常容易實現的。只要你略懂css知識都可以實現操作。

主要知識點就是滑鼠懸停在CSS中寫為HOVER,滑鼠觸發在CSS中寫為ACTIVE。

css滑鼠經過字體變色效果實現的具體程式碼範例如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css字体变色测试</title>
</head>
<style>
    a {
        color:black}
    a:hover {
        color:red }
    a:active {
        color:blue}
</style>
<body>
<a>
    你过来指我试试!!!
</a>
</body>
</html>

以上程式碼可以直接複製在本機測試。

滑鼠劃過字體時如何用css來實現字體變色? (程式碼實測)

註:a後面的color:red;等於連結文字為黑色,a:hover 的color:black;等於滑鼠移到連結文字上後為紅色, a :active 的color:blue;等於滑鼠點擊連結文字後為藍色。 

那麼希望這篇文章關於css滑鼠經過字體變色效果如何實現的問題介紹,對大家有幫助!

【相關內容推薦】

CSS中關於文字字體顏色(CSS color)的詳解

html和css中字體顏色設定的相關總結

字體顏色背景色的設定

#CSS如何實作文字色彩漸層的實例


以上是滑鼠劃過字體時如何用css來實現字體變色? (程式碼實測)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn