CSS鼠標懸停圖片加邊框效果,不位移的方法


 
         
<!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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM