css滑鼠懸浮小圖彈出大圖效果
本章節分享一段程式碼例項,它實現了滑鼠懸浮小圖彈出大圖效果。
非常的簡單,程式碼如下:
[HTML] 純文字檢視 複製程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> * { margin: 0; padding: 0; } a { text-decoration: none; } body { width: 620px; margin: 0 auto; text-align: center; padding-top: 30px; } ul { margin-top: 20px; padding-top: 20px; border-top: 1px dashed #c8c8c8; } li { display: inline-block; position: relative; list-style: none; border: 1px solid #ccc; border-color: #ddd #bbb #aaa #ccc; } a > img:first-child { width: 105px; height: 80px; padding: 2px; border: 5px solid #ddd; } .previewImg { display: none; position: absolute; background-color: #ddd; width: 200px; height: 150px; top: -25px; left: -43px; z-index: 10; } a:hover .previewImg { display: block; border: 1px solid #333; padding: 2px; } </style> </head> <body> <ul> <li> <a href="#"> <img src="demo/CSS/img/photo01.jpg" alt="螞蟻部落" /> <img src="demo/CSS/img/photo01.jpg" alt="softwhy.com" class="previewImg" /> </a> </li> </ul> </body> </html>
相關文章
- 滑鼠懸浮小圖彈出大圖效果詳解
- CSS滑鼠懸浮圖片動畫放大效果CSS動畫
- CSS滑鼠懸浮圖片模糊切換效果CSS
- CSS3滑鼠懸浮圖片閃動效果CSSS3
- CSS3滑鼠懸浮圖片縮小出現文CSSS3
- 滑鼠懸浮圖片旋轉效果
- 滑鼠懸浮圖片出現文字說明效果
- css滑鼠懸浮下拉選單效果CSS
- 滑鼠懸浮圖片實現翻轉效果
- 滑鼠懸浮圖片實現縮放效果
- CSS3滑鼠懸浮圖示旋轉CSSS3
- jQuery 滑鼠懸浮連結彈出跟隨圖片詳解jQuery
- CSS3滑鼠懸浮元素放大效果CSSS3
- CSS滑鼠懸浮行背景變色效果CSS
- CSS 滑鼠懸浮動畫暫停效果CSS動畫
- CSS3滑鼠懸浮div旋轉效果CSSS3
- CSS3滑鼠懸浮環裝遮罩效果CSSS3遮罩
- CSS3滑鼠懸浮圖片前後翻轉CSSS3
- CSS3滑鼠懸浮動畫按鈕效果CSSS3動畫
- CSS3連結<a>滑鼠懸浮動畫效果CSSS3動畫
- 滑鼠懸浮連結彈出說明層
- jquery 滑鼠移到圖片彈出浮動層顯示大圖片例子jQuery
- [譯] CSS 變數實現炫酷滑鼠懸浮效果CSS變數
- jQuery滑鼠懸浮翻牌效果詳解jQuery
- jQuery滑鼠懸浮聚焦效果詳解jQuery
- 滑鼠懸浮div實現旋轉效果
- 滑鼠懸浮連結動畫高亮效果動畫
- 滑鼠懸浮電風扇旋轉效果
- 滑鼠懸浮圖片3D翻轉出現文字說明3D
- jQuery點選小圖彈出大圖jQuery
- 滑鼠懸浮實現環形旋轉效果
- CSS: hover選擇器的使用(實現滑鼠懸浮效果,滑鼠移上去div顯示)CSS
- 滑鼠懸浮導航欄背景和字型變色效果
- CSS3滑鼠懸浮橫條從中間向兩邊擴充套件效果CSSS3套件
- 滑鼠懸浮連結底部出現橫線
- 利用css變數實現按鈕懸浮效果CSS變數
- CSS3標懸浮圓形縮放效果CSSS3
- 簡單介紹Vue實現滑鼠懸浮切換圖片srcVue
- css滑鼠浮劃過切換按鈕背景圖片CSS