溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“CSS怎么實現鼠標滑過文字出現效果”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“CSS怎么實現鼠標滑過文字出現效果”文章能幫助大家解決問題。
實現思路：
先對照片和文字內容設置樣式，將文字的可見設置為不可見visibility: hidden。之后加上hover樣式。
.photo:hover .text具體代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠標滑過文字出現 - 億速云(yisu.com)</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.yisu.com/statics/img/logo/indexlogo@2x.png"></div>
<div class="text">
<div class="c1"><h2>懸浮文字</h2></div>
</div>
</div>
</body>
</html>關于“CSS怎么實現鼠標滑過文字出現效果”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
