怎么實現(xiàn)鼠標滑過變色
時間:
沈迪豪908由 分享
怎么實現(xiàn)鼠標滑過變色
愛學習的小伙伴們,可能都 網(wǎng)頁制作經(jīng)常會使用到這樣一個功能,鼠標滑過字體后字體顏色改邊,讓我們一起來看一下這個功能是怎么實現(xiàn)的吧。鼠標滑過功能需要用到:hover選擇器來實現(xiàn)。下面是學習啦小編收集整理關(guān)于鼠標滑過變色的資料以供大家參考學習,希望大家喜歡。
鼠標滑過變色的實現(xiàn)
方法/步驟
創(chuàng)建一個html文件,如圖:
在html頁面找到<body>標簽,在<body>標簽里面輸入內(nèi)容,然后用<a>標簽把內(nèi)容覆蓋。如圖:
修改<a>標簽的內(nèi)容設置顏色為藍色,如圖:
設置鼠標滑過<a>標簽,字體變?yōu)榧t色的樣式:a:hover{color:red} 。如圖:
保存好html文件,使用瀏覽器打開,首先看到的是藍色字體,把鼠標放到文字上就會發(fā)現(xiàn)藍色字體變?yōu)榧t色字體。
實現(xiàn)的所有代碼,直接把代碼復制到html文件即可看到效果:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>鼠標滑過字體變色</title>
<style type="text/css">
a{
color:blue;
}
a:hover{
color: red;
}
</style>
</head>
<body>
<a href="">把鼠標放到我身上</a>
</body>
</html>