|
導(dǎo)讀網(wǎng)頁的本質(zhì)就是超級文本標(biāo)記語言，通過結(jié)合使用其他的Web技術(shù)（如：腳本語言、公共網(wǎng)關(guān)接口、組件等），可以創(chuàng)造出功能強(qiáng)大的網(wǎng)頁。因而，超級文本標(biāo)記語言是萬維網(wǎng)（Web）編程的基礎(chǔ)，也就是說萬維網(wǎng)是建立... 網(wǎng)頁的本質(zhì)就是超級文本標(biāo)記語言，通過結(jié)合使用其他的Web技術(shù)（如：腳本語言、公共網(wǎng)關(guān)接口、組件等），可以創(chuàng)造出功能強(qiáng)大的網(wǎng)頁。因而，超級文本標(biāo)記語言是萬維網(wǎng)（Web）編程的基礎(chǔ)，也就是說萬維網(wǎng)是建立在超文本基礎(chǔ)之上的。超級文本標(biāo)記語言之所以稱為超文本標(biāo)記語言，是因?yàn)槲谋局邪怂^“超級鏈接”點(diǎn)。 在頁面布局時(shí)，經(jīng)常會用到CSS中的hover選擇器，它可以設(shè)置鼠標(biāo)經(jīng)過時(shí)的特殊樣式，作為一個(gè)前端開發(fā)人員，你知道CSS偽類選擇器hover怎么使用嗎？這篇文章就和大家講講CSS中hover的使用方法及實(shí)例示范，有一定的參考價(jià)值，感興趣的朋友可以看看。偽類選擇器hover可以在鼠標(biāo)移到鏈接上時(shí)設(shè)置一些特殊樣式，比如字體大小,背景顏色，顯示隱藏等等。 注意：偽類選擇器hover 可以作用于所有元素，不僅僅是鏈接。 與hover類似的選擇器還有l(wèi)ink，visited，active。 link 選擇器可以設(shè)置未被訪問過的鏈接樣式， visited 選擇器可以設(shè)置已被訪問過的鏈接樣式，active選擇器可以設(shè)置被激活的鏈接樣式。不清楚的同學(xué)可以參考 CSS視頻教程。 用法1：當(dāng)鼠標(biāo)經(jīng)過鏈接時(shí)改變其自身的樣式（hover后面直接接樣式） 描述：當(dāng)鼠標(biāo)經(jīng)過時(shí)，a標(biāo)簽的字體顏色變?yōu)榧t色，字體變大，代碼如下： <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.aa{text-decoration: none;color: #000000;}
.aa:hover{color: red;font-size: 20px ;}
</style>
</head>
<body>
<a href="#" class="aa">歡迎大家來PHP中文網(wǎng)學(xué)習(xí)交流</a>
</body>
</html>第一張圖是原來的效果，第二張圖是鼠標(biāo)經(jīng)過后實(shí)現(xiàn)的效果。
用法2：用偽類選擇器hover控制其子元素的樣式（hover后面加空格再接要改變元素的樣式） 描述：當(dāng)鼠標(biāo)經(jīng)過時(shí)div時(shí)，其子元素的顏色變?yōu)樽仙�，字體變大，出現(xiàn)紅色邊框，代碼如下： <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.aa{text-decoration: none;color: #000000;}
.box:hover .aa{color: purple;font-size: 30px ;border: 1px solid red;}
</style>
</head>
<body>
<div class="box">
<a href="#" class="aa">望子成龍，望女成鳳</a>
</div>
</body>
</html>效果如下圖所示：
用法3：當(dāng)鼠標(biāo)經(jīng)過時(shí)控制其兄弟元素的樣式（hover后面加“+”再接要改變元素的樣式） 描述：鼠標(biāo)經(jīng)過時(shí)其兄弟元素的背景顏色變?yōu)辄S色，字體變大，代碼如下： <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.aa{text-decoration: none;color: #000000;}
.box1:hover + .box2{font-size: 30px ;background: yellow;}
</style>
</head>
<body>
<div class="box1">床前明月光</div>
<div class="box2">疑是地上霜</div>
</body>
</html>效果圖：
以上給大家介紹了CSS中偽類選擇器hover的使用方法，初學(xué)者可以自己動手嘗試，看看你的代碼能不能實(shí)現(xiàn)效果，希望這篇文章對你有所幫助！ 以上就是實(shí)例示范CSS中偽類選擇器hover的使用方法的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！ 網(wǎng)站建設(shè)是一個(gè)廣義的術(shù)語，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。 |
溫馨提示：喜歡本站的話，請收藏一下本站！
本站發(fā)布的Win7純凈版系統(tǒng)、Win10純凈版和XP純凈版系統(tǒng)僅為個(gè)人學(xué)習(xí)測試使用，請?jiān)谙螺d后24小時(shí)內(nèi)刪除，不得用于任何商業(yè)用途，否則后果自負(fù)，請支持購買微軟正版軟件！
本站所有資源全部來自于網(wǎng)絡(luò)資源,如侵犯到您的權(quán)益,請及時(shí)通知我們(peng896066052@126.com),我們會及時(shí)處理.
Copyright © 2018-2020 雨林木風(fēng)下載站
