1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 <style> 7 body { 8 background:#999; 9 } 10 a { 11 display: block; 12 position: relative; 13 width:64px; 14 height:64px; 15 margin: 100px auto; 16 } 17 a:hover em { 18 display:block; 19 position:absolute; 20 left:26px; /*(a的宽度-em的宽度)/2*/ 21 top:-12px; /*em自身边框宽度的二倍*/ 22 border-width:6px; 23 border-style:solid; 24 border-color: transparent transparent #fff;/*transparent 用来指定全透明色彩*/ 25 } 26 a:hover img { 27 width:58px; 28 height:58px; 29 border:3px solid #fff; 30 opacity:1; filter:alpha(opacity:100); 31 } 32 a img { 33 width:60px; 34 height:60px; 35 border: 2px solid #dfe8e4; 36 background:#040303; 37 opacity:0.7; 38 filter:alpha(opacity:70); 39 } 40 </style> 41 </head> 42 43 <body> 44 <a><em></em><img src="img/2.jpg" /></a> 45 </body> 46 </html>