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