css怎樣實現鼠標懸浮改變圖片
在css中，可以使用“:hover”偽類選擇器和background屬性實現鼠標懸浮改變圖片的效果，語法為“圖片元素:hover{background:url(鼠標懸浮后顯示圖片的路徑);}”。
本教程操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
css鼠標懸浮改變圖片
在CSS中使用:hover 偽類可以達到這個效果，:hover 選擇器用于選擇鼠標指針浮動在上面的元素。
提示：:hover 選擇器可用于所有元素，不只是鏈接。
立即學習“前端免費學習筆記（深入）”；
提示：:link 選擇器設置指向未被訪問頁面的鏈接的樣式，:visited 選擇器用于設置指向已被訪問的頁面的鏈接，:active 選擇器用于活動鏈接。
注釋：在 CSS 定義中，:hover 必須位于 :link 和 :visited 之后（如果存在的話），這樣樣式才能生效。
下面我們通過示例來看一下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style type="text/css">
div{
width:350px;
height:250px;
background:url(1118.01.png);
}
div:hover{
background:url(1118.02.png);
}/*鼠標經過*/
</style>
<body>
<div> </div>
</body>
</html>當鼠標未放在圖片上時，輸出結果如下：
當鼠標放在圖片上時，輸出結果如下：
由此便完成了鼠標懸浮改變圖片。
更多編程相關知識，請訪問：編程視頻！！
以上就是css怎樣實現鼠標懸浮改變圖片的詳細內容，更多請關注有啊網站百科其它相關文章！
- 喜歡（11）
- 不喜歡（3）
聲明：本文由會員轉載自互聯網、僅供學習交流，內容版權歸原作者所有，如涉作品、版權或其它疑問請聯系本站管理員刪除。
火車太堵
電影獵手
555
豌豆
有啊京券網
有啊淘券網
極簡插件
RedHelper
壹伴
百分投簡歷
