|
導(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)收藏一下本站!