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動畫
- CSS滑鼠懸浮圖片模糊切換效果CSS
- css3滑鼠懸浮小球彈性效果CSSS3
- CSS3滑鼠懸浮圖片閃動效果CSSS3
- CSS3滑鼠懸浮圖片縮小出現文CSSS3
- 滑鼠懸浮圖片實現翻轉效果
- 滑鼠懸浮圖片實現縮放效果
- CSS 滑鼠懸浮動畫暫停效果CSS動畫
- css滑鼠懸浮下拉選單效果CSS
- jQuery 滑鼠懸浮連結彈出跟隨圖片詳解jQuery
- CSS3 滑鼠懸浮元素放大和縮小效果CSSS3
- CSS3滑鼠懸浮圖示旋轉CSSS3
- CSS滑鼠懸浮行背景變色效果CSS
- css滑鼠懸浮div背景變色效果CSS
- CSS3滑鼠懸浮元素放大效果CSSS3
- jQuery滑鼠懸浮當前圖片高亮其他圖片灰暗效果jQuery
- jquery滑鼠懸浮彈出帶有箭頭的tips效果jQuery
- 滑鼠懸浮實現圖片動畫上下切換效果動畫
- CSS3滑鼠懸浮環裝遮罩效果CSSS3遮罩
- CSS3滑鼠懸浮div旋轉效果CSSS3
- CSS3滑鼠懸浮動畫按鈕效果CSSS3動畫
- CSS3連結<a>滑鼠懸浮動畫效果CSSS3動畫
- CSS3滑鼠懸浮圖片前後翻轉CSSS3
- jquery 滑鼠移到圖片彈出浮動層顯示大圖片例子jQuery
- javascript實現滑鼠懸浮圖片實現抖動效果JavaScript
- 滑鼠懸浮實現當前圖片高亮效果詳解
- css3實現滑鼠懸浮圖示旋轉高亮效果程式碼例項CSSS3
- css滑鼠懸浮tips效果程式碼例項CSS
- CSS3滑鼠懸浮交叉線效果按鈕CSSS3
- 滑鼠懸浮彈出滑鼠跟隨層程式碼例項
- css滑鼠懸浮切換圖片滑鼠離開又恢復預設CSS
- HTML CSS 實現滑鼠懸停時圖片拉近效果HTMLCSS
- [譯] CSS 變數實現炫酷滑鼠懸浮效果CSS變數
- 滑鼠懸浮連結彈出提示程式碼例項
- jQuery滑鼠懸浮翻牌效果詳解jQuery
- jQuery滑鼠懸浮聚焦效果詳解jQuery