CSS如何實現鼠標滑過文字出現效果？

猿友 2021-03-25 17:47:42 瀏覽數 (8192)

反饋

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

先讓我們來看下實現效果：當鼠標滑過圖片時，文字出現；鼠標離開時，文字消失。

GIF 2021-3-25 15-29-25

實現思路：

先對照片和文字內容設置樣式，將文字的可見設置為不可見?visibility: hidden?。之后加上?hover?樣式。

.photo:hover .text

具體代碼：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>鼠標滑過文字出現 - 編程獅(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 如何實現鼠標滑過文字出現效果的全部內容。更多 CSS 效果學習請關注 w3cschool 官網。

相關文章：CSS如何設置圖片旋轉、CSS如何實現陰影效果

CSS

0 人點贊

CSS如何實現鼠標滑過文字出現效果？

CSS如何實現鼠標滑過文字出現效果？