網(wǎng)頁開發(fā)中，鼠標(biāo)滑過文字懸浮出現(xiàn)的應(yīng)用還是很廣泛的，該種效果的專業(yè)術(shù)語成為“遮罩層”。例如在一些電商網(wǎng)站或者新聞網(wǎng)站中，需要對某張圖片添加文字信息或者內(nèi)容時(shí)，就會(huì)用到這個(gè)效果。那么今天這篇文章 w3cschool 小編就來教你 CSS 如何實(shí)現(xiàn)鼠標(biāo)滑過文字出現(xiàn)效果。
先讓我們來看下實(shí)現(xiàn)效果：當(dāng)鼠標(biāo)滑過圖片時(shí)，文字出現(xiàn)；鼠標(biāo)離開時(shí)，文字消失。
實(shí)現(xiàn)思路：
先對照片和文字內(nèi)容設(shè)置樣式，將文字的可見設(shè)置為不可見?visibility: hidden?。之后加上?hover?樣式。
.photo:hover .text具體代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠標(biāo)滑過文字出現(xiàn) - 編程獅(w3cschool.cn)</title>
<style type="text/css">
.photo{
width: 428px;
height: 100px;
overflow: hidden;
position: relative;
}
.photo .text{
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0,.4);
color: white;
text-align: center;
visibility: hidden;
}
.photo:hover .text{
visibility: inherit;
}
</style>
</head>
<body>
<div class="photo">
<div><img src="https://7n.w3cschool.cn/statics/img/logo/indexlogo@2x.png"></div>
<div class="text">
<div class="c1"><h1>懸浮文字</h1></div>
</div>
</div>
</body>
</html>以上就是 CSS 如何實(shí)現(xiàn)鼠標(biāo)滑過文字出現(xiàn)效果的全部內(nèi)容。更多 CSS 效果學(xué)習(xí)請關(guān)注 w3cschool 官網(wǎng)。
相關(guān)文章：CSS如何設(shè)置圖片旋轉(zhuǎn)、CSS如何實(shí)現(xiàn)陰影效果
