|
導(dǎo)讀網(wǎng)頁(yè)的本質(zhì)就是超級(jí)文本標(biāo)記語(yǔ)言，通過(guò)結(jié)合使用其他的Web技術(shù)（如：腳本語(yǔ)言、公共網(wǎng)關(guān)接口、組件等），可以創(chuàng)造出功能強(qiáng)大的網(wǎng)頁(yè)。因而，超級(jí)文本標(biāo)記語(yǔ)言是萬(wàn)維網(wǎng)（Web）編程的基礎(chǔ)，也就是說(shuō)萬(wàn)維網(wǎng)是建立... 網(wǎng)頁(yè)的本質(zhì)就是超級(jí)文本標(biāo)記語(yǔ)言，通過(guò)結(jié)合使用其他的Web技術(shù)（如：腳本語(yǔ)言、公共網(wǎng)關(guān)接口、組件等），可以創(chuàng)造出功能強(qiáng)大的網(wǎng)頁(yè)。因而，超級(jí)文本標(biāo)記語(yǔ)言是萬(wàn)維網(wǎng)（Web）編程的基礎(chǔ)，也就是說(shuō)萬(wàn)維網(wǎng)是建立在超文本基礎(chǔ)之上的。超級(jí)文本標(biāo)記語(yǔ)言之所以稱為超文本標(biāo)記語(yǔ)言，是因?yàn)槲谋局邪怂^“超級(jí)鏈接”點(diǎn)。 我們?cè)谶M(jìn)行網(wǎng)站設(shè)計(jì)時(shí)，如果遇到要求當(dāng)鼠標(biāo)移入移出某張圖片時(shí)，要自動(dòng)覆蓋另一張圖片，該如何去操作呢？其實(shí)稍微懂得一些css代碼的朋友都知道這是一個(gè)非常簡(jiǎn)單的操作。即便是新手小白，只要通過(guò)本篇文章介紹，都能夠輕而易舉得了解其中知識(shí)點(diǎn)。那么今天我為大家詳細(xì)的介紹css鼠標(biāo)經(jīng)過(guò)樣式中覆蓋某張圖片的特效功能。css鼠標(biāo)移入移出覆蓋另一張圖片的具體代碼示例： <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css鼠標(biāo)經(jīng)過(guò)樣式測(cè)試</title>
</head>
<body>
<div class="div">
<div class="img1 img">
<img src="1.png">
</div>
<div class="img2 img">
<img src="2.png">
</div>
</div>
<style>
.div{position:relative; width:800px; margin:auto;}
.img{position:absolute; z-index:0;}
.img2{left:150px; top:100px;}
.img1:hover{z-index:1;}
</style>
</body>
</html>以上效果如下圖： 1、剛打開(kāi)頁(yè)面顯示的是：
2、css鼠標(biāo)移入顯示則是覆蓋了另一張：
其實(shí)本篇文章介紹的關(guān)鍵就是利用hover偽類。這里也給大家簡(jiǎn)單介紹下css:hover的定義和用法。 :hover 偽類是在鼠標(biāo)移到元素上時(shí)向此元素添加特殊的樣式。這個(gè)偽類應(yīng)用處于“懸停狀態(tài)”的元素。懸停定義為用戶指示了一個(gè)元素但沒(méi)有將其激活。對(duì)此最常見(jiàn)的例子是將鼠標(biāo)指針移到 HTML 文檔中一個(gè)超鏈接的邊界范圍內(nèi)。理論上，其他元素也可以處于懸停狀態(tài)，不過(guò) CSS 沒(méi)有定義究竟是哪些元素。 注：所有主流瀏覽器都支持 :hover 偽類。 希望本篇文章對(duì)有需要的朋友有所幫助！ 以上就是鼠標(biāo)移入移出時(shí)覆蓋另一張圖片怎么用css來(lái)實(shí)現(xiàn)？（示例）的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！ 網(wǎng)站建設(shè)是一個(gè)廣義的術(shù)語(yǔ)，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。 |
溫馨提示：喜歡本站的話，請(qǐng)收藏一下本站！
本站發(fā)布的Win7純凈版系統(tǒng)、Win10純凈版和XP純凈版系統(tǒng)僅為個(gè)人學(xué)習(xí)測(cè)試使用，請(qǐng)?jiān)谙螺d后24小時(shí)內(nèi)刪除，不得用于任何商業(yè)用途，否則后果自負(fù)，請(qǐng)支持購(gòu)買微軟正版軟件！
本站所有資源全部來(lái)自于網(wǎng)絡(luò)資源,如侵犯到您的權(quán)益,請(qǐng)及時(shí)通知我們(peng896066052@126.com),我們會(huì)及時(shí)處理.
Copyright © 2018-2020 雨林木風(fēng)下載站
