前言：
當我們需要為滑鼠懸停添加一個樣式，都會使用hover偽類，透過它我們可以在滑鼠移動到元素上時向此元素添加特殊的樣式。例如一個普通的URL，當我們將滑鼠移到URL連結上，它會變色。
一、概述
在現實的應用場景也非常之多。最常見的是網站的懸浮導航，當滑鼠放到導航條上時，會出現顏色變化或元素自動伸出選單列。
實例1：滑鼠hover時，將內容框起來
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.ele:hover {
border:1px solid red;
}
.ele {
#去掉边框闪烁问题。（因为边框1像素会导致闪烁，所以先用1px透明色占住位置，hover时再让其变红，就不会觉得有闪烁了）
border:1px solid transparent;
}
</style>
</head><body>
<div class="ele">
<div>222</div>
<div class="ele-item">111</div>
</div>
</body>
</html>原始效果：
滑鼠懸停後：
實例2：尾品會vdangdang.com首頁最下面有這樣的圖片
原始網頁：
滑鼠懸停後效果：
#其實這個主要就是用hover製作而成。下面說一下具體實作：
實作想法：
1、新建一個div1
2、新建一個div2，把底部圖片放入div2
3、再新建一個div3 ，懸浮內容放入div3
HTML程式碼：
<div class="touch">
<div><img src="/static/imghwm/default1.png" data-src="3.png" class="lazy" alt="分享幾款非常好看的滑鼠懸停樣式" ></div>
<div class="content">
<p><h5 id="品牌故事">品牌故事</h5></p>
<p><h6 id="我们的源泉不是时尚-不是潮流-而是由心而发的喜爱-将精致华丽的艺术融入东方式的低调-都只为了一个人而存在">我们的源泉不是时尚，不是潮流，而是由心而发的喜爱，将精致华丽的艺术融入东方式的低调，都只为了一个人而存在。</h6></p>
<input class="inpt" type="text" name="tel" id="tel"/>
<button class="btn">开售提醒</button>
</div>
</div>（學習影片分享：css影片教學）
CSS程式碼：
1、定義div1高度和寬度，class為touch，overflow設定為hidden，圖片超過定義的高度和寬度會隱藏。
.touch {
height:200px;
width:400px;
overflow:hidden;
position:relative;
}2、div2為content，內容必須填滿div1，所以設定上下左右都為0.且設定字體大小、顏色、對齊方式。
首先設定div2為不可見，即在滑鼠hover之前內容預設是隱藏的，當滑鼠懸浮後，再放出來。
.touch .content {
top:0;
left:0;
right:0;
bottom:0;
position:absolute;
font-size:20px;
background-color:black;
color:white;
text-align:center;
visibility:hidden;
}3、設定滑鼠懸浮時樣式。內容放出來，且設定背景圖片透明度為0.5，可以被看見。
.touch:hover .content{
visibility:visible;
border:4px solid red;
background-color:rgba(0,0,0,0.5)
}4、最後設定input框與button
.touch .content .btn{
background-color:#e83375;
color:white;
cursor: pointer;
border: none;
width: 70px;
height: 22px;
}
.touch .content .inpt{
height: 18px;
border: none
line-height: 18px;
font-size: 12px;
}整體html程式碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.touch {
height:200px;
width:400px;
overflow:hidden;
position:relative;
}
.touch .content {
top:0;
left:0;
right:0;
bottom:0;
position:absolute;
font-size:20px;
background-color:black;
color:white;
text-align:center;
visibility:hidden;
}
.touch:hover .content{
visibility:visible;
border:4px solid red;
background-color:rgba(0,0,0,0.5)
}
.touch .content .btn{
background-color:#e83375;
color:white;
cursor: pointer;
border: none;
width: 70px;
height: 22px;
}
.touch .content .inpt{
height: 18px;
border: none
line-height: 18px;
font-size: 12px;
}
</style>
</head>
<body>
<div class="touch">
<div><img src="/static/imghwm/default1.png" data-src="3.png" class="lazy" alt="分享幾款非常好看的滑鼠懸停樣式" >
</div>
<div class="content">
<p><h5 id="品牌故事">品牌故事</h5></p>
<p><h6 id="我们的源泉不是时尚-不是潮流-而是由心而发的喜爱-将精致华丽的艺术融入东方式的低调-都只为了一个人而存在-nbsp">我们的源泉不是时尚，不是潮流，而是由心而发的喜爱，将精致华丽的艺术融入东方式的低调，都只为了一个人而存在。 </h6></p>
<input class="inpt" type="text" name="tel" value="请输入手机号码或邮箱地址" id="tel"/>
<button class="btn">开售提醒</button>
</div>
</div>
</body>
</html>關鍵知識點：
#1 、最外面的div設定成relative，把content設定absolute，然後top、bottom、left、right設定都是0，也就是把content鋪滿div；
2、visibility:hidden；預設隱藏最上面的內容；
3、visibility:visible和background-color:rgba(0,0,0,0.5)，hover時放出內容，並且設定背景透明度，可以看到背景圖片；
相關推薦：CSS教學
作者：@skyflask
轉載本文請註明出處：https://www.cnblogs.com/skyflask/p/ 8886508.html
以上是分享幾款非常好看的滑鼠懸停樣式的詳細內容。更多資訊請關注PHP中文網其他相關文章！
Draggin＆＃039;和droppin＆＃039;在反應中Apr 17, 2025 am 11:52 AMReact生態系統為我們提供了許多庫，所有庫都集中在拖放的相互作用上。我們有反應，反應，可愛dnd，
帶有背景折疊的嵌套梯度Apr 17, 2025 am 11:47 AM我可以說我經常使用背景折疊。 IT Wager IT幾乎從未在日常CSS工作中使用。但是在斯特凡·朱迪斯（Stefan Judis）的帖子中，我想起了它，
使用React Hooks使用requestAnimationFrameApr 17, 2025 am 11:46 AM使用RequestAnimationFrame進行動畫化應該很容易，但是如果您還沒有徹底閱讀React的文檔，那麼您可能會遇到一些事情
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
禪工作室 13.0.1
強大的PHP整合開發環境
SecLists
SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合，這些清單在安全評估過程中經常使用，而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表，幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上，他就可以存取所需的每種類型的清單。
Dreamweaver CS6
視覺化網頁開發工具
ZendStudio 13.5.1 Mac
強大的PHP整合開發環境
