CSS如何實(shí)現(xiàn)鼠標(biāo)滑過(guò)文字出現(xiàn)效果？

猿友 2021-03-25 17:47:42 瀏覽數(shù) (8057)

反饋

網(wǎng)頁(yè)開(kāi)發(fā)中，鼠標(biāo)滑過(guò)文字懸浮出現(xiàn)的應(yīng)用還是很廣泛的，該種效果的專業(yè)術(shù)語(yǔ)成為“遮罩層”。例如在一些電商網(wǎng)站或者新聞網(wǎng)站中，需要對(duì)某張圖片添加文字信息或者內(nèi)容時(shí)，就會(huì)用到這個(gè)效果。那么今天這篇文章 w3cschool 小編就來(lái)教你 CSS 如何實(shí)現(xiàn)鼠標(biāo)滑過(guò)文字出現(xiàn)效果。

先讓我們來(lái)看下實(shí)現(xiàn)效果：當(dāng)鼠標(biāo)滑過(guò)圖片時(shí)，文字出現(xiàn)；鼠標(biāo)離開(kāi)時(shí)，文字消失。

GIF 2021-3-25 15-29-25

實(shí)現(xiàn)思路：

先對(duì)照片和文字內(nèi)容設(shè)置樣式，將文字的可見(jiàn)設(shè)置為不可見(jiàn)?visibility: hidden?。之后加上?hover?樣式。

.photo:hover .text

具體代碼：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>鼠標(biāo)滑過(guò)文字出現(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)滑過(guò)文字出現(xiàn)效果的全部?jī)?nèi)容。更多 CSS 效果學(xué)習(xí)請(qǐng)關(guān)注 w3cschool 官網(wǎng)。

CSS

0 人點(diǎn)贊