一、鼠標(biāo)移動(dòng)到元素上方顯示 / 移出盒子范圍隱藏案例要點(diǎn)分析
1、子絕父相
這里要 在一個(gè) div 盒子上方套一層遮罩 , 遮罩就需要 使用絕對(duì)定位將其覆蓋到其它元素中 ;
子元素使用了 絕對(duì)定位 , 父元素必須使用 相對(duì)定位 ;
2、顯示隱藏元素對(duì)象
使用
display: none;
樣式 隱藏元素 ,
使用
display: block;
樣式 顯示元素 ;
3、鼠標(biāo)經(jīng)過(guò)樣式設(shè)置
鼠標(biāo)經(jīng)過(guò) 鏈接 時(shí) , 顯示 鏈接 中的 one 元素 , 需要使用如下選擇器 進(jìn)行設(shè)置 ;
/* 鼠標(biāo)經(jīng)過(guò)時(shí) one 作為遮罩 顯示出來(lái) */
.box a:hover .one {
/* 設(shè)置顯示元素 none 為隱藏 block 為顯示 */
display: block;
}
4、半透明遮罩設(shè)置
使用 background 復(fù)合寫(xiě)法 , 設(shè)置半透明背景 , 背景圖片 , 背景圖片位置 ;
/* 設(shè)置背景 背景顏色 + 背景圖片
背景顏色為黑色半透明
背景圖片 不平鋪 只顯示 1 個(gè) 顯示在正中心 */
background: rgba(0, 0, 0, .3) url(bg.png) no-repeat center center;
二、代碼示例
代碼示例 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠標(biāo)移動(dòng)到元素上方顯示 / 移出盒子范圍隱藏案例</title>
<style>
/* 最外層的父容器元素 */
.box {
/* 子絕父相 : 子元素需要使用絕對(duì)定位相互覆蓋
父元素必須設(shè)置相對(duì)定位 */
position: relative;
/* 內(nèi)存尺寸 300 x 300 像素 */
width: 300px;
height: 300px;
/* 垂直方向設(shè)置 100 像素上下邊距
水平方向設(shè)置 瀏覽器窗口 居中 */
margin: 100px auto;
background-color: pink;
}
/* 設(shè)置底部顯示內(nèi)容 用于撐開(kāi) a 鏈接尺寸
也可以直接設(shè)置 a 鏈接的尺寸 */
.two {
/* 內(nèi)存尺寸 300 x 300 像素 */
width: 300px;
height: 300px;
background-color: blue;
}
/* 半透明遮罩 開(kāi)始時(shí)是隱藏的 鼠標(biāo)移動(dòng)到 a 鏈接后顯示該元素 */
.one {
/* 先設(shè)置隱藏元素 */
display: none;
/* 設(shè)置相對(duì)定位 可以顯示在父容器任意位置 */
position: absolute;
top: 0;
left: 0;
/* 內(nèi)存尺寸 300 x 300 像素 */
width: 300px;
height: 300px;
/* 設(shè)置背景 背景顏色 + 背景圖片
背景顏色為黑色半透明
背景圖片 不平鋪 只顯示 1 個(gè) 顯示在正中心 */
background: rgba(0, 0, 0, .3) url(bg.png) no-repeat center center;
}
/* 鼠標(biāo)經(jīng)過(guò)時(shí) one 作為遮罩 顯示出來(lái) */
.box a:hover .one {
/* 設(shè)置顯示元素 none 為隱藏 block 為顯示 */
display: block;
}
</style>
</head>
<body>
<div class="box">
<a href="#">
<div class="one"></div>
<div class="two"></div>
</div>
</div>
</body>
</html>
顯示效果 :
-
默認(rèn)效果 :
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-497031.html -
鼠標(biāo)移動(dòng)到元素上方后的效果 :
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-497031.html
到了這里，關(guān)于【CSS】鼠標(biāo)移動(dòng)到元素上方顯示 / 移出盒子范圍隱藏案例 ( 子絕父相 | 顯示隱藏元素對(duì)象 | 鼠標(biāo)經(jīng)過(guò)樣式設(shè)置 | 半透明遮罩設(shè)置 )的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
