<!DOCTYPE HTML> <html lang="en-US"> <head> <title>css實現鼠標懸停時圖片加邊框效果</title> <style type="text/css"> body{background:#222;color:#06c;} em{ font-style:inherit;} img{background:white;margin:0 5px;width:70px;height:70px;} img:hover{border:1px red solid;} .demo2 img{border:1px solid transparent;} .demo2 img:hover{border:1px red solid;} .demo3 img:hover{width:68px;height:68px;border:1px solid yellow;} </style> </head> <body> <div class="demo1"> <img src="/jscss/demoimg/wall_s6.jpg" /> <img src="/jscss/demoimg/wall_s6.jpg" /> <img src="/jscss/demoimg/wall_s6.jpg" /> <img src="/jscss/demoimg/wall_s6.jpg" /> <em>明顯看到當img標簽在hover的時候由於出現邊框導致位移</em> </div> <div class="demo2"> <img src="/jscss/demoimg/wall_s6.jpg" /> <img src="/jscss/demoimg/wall_s6.jpg" /> <img src="/jscss/demoimg/wall_s6.jpg" /> <img src="/jscss/demoimg/wall_s6.jpg" /> <em>給每個img添加border:1px solid transparent;世界就和平了</em> </div> <div class="demo3"> <img src="/jscss/demoimg/wall_s6.jpg" /> <img src="/jscss/demoimg/wall_s6.jpg" /> <img src="/jscss/demoimg/wall_s6.jpg" /> <img src="/jscss/demoimg/wall_s6.jpg" /> <em>修改width和height,世界繼續和平</em> </div> </body> </html>
代碼保存打開
1.修改width和height
2.給每個img添加border:1px solid transparent(如果是div或者塊元素出現這種情況也可以加,誰出現誰加就對了)
轉載http://www.codefans.net/jscss/code/3039.shtml