• 思缘论坛首页
  • 论坛搜索
  • 下载记录
  • 每日签到
  • 设计软件,PS下载
  • VIP素材区预览
  • VIP素材区下载
  • 缘分币充值
发新话题
打印

[CSS教程] CSS实用教程:鼠标悬停图片加边框效果

CSS实用教程:鼠标悬停图片加边框效果

千库网
CSS给图片Hover加边框,不位移的方法,当鼠标滑过图片时,图片出现用CSS定义的外框,但很多时候,加了边框后,图片要产生位移,影响整体效果,本例的三种方法,会让您明白,如何在加边框后不位移的方法。
引用:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<title>css实现鼠标悬停时图片加边框效果</title>
<style type="text/css">       
        body{background:#000;color:#06c;}
        em{ font-style:inherit;}
        img{background:white;margin:0 5px;width:275px;height:212px;}
        img:hover{border:1px red solid;}
        .demo1 img{border:5px solid transparent;}
        .demo2 img:hover{border:5px red solid;}
        .demo3 img:hover{width:270px;height:207px;border:5px solid yellow;}
        </style>

</head>
<body>
<div class="demo1">
                <img src="http://ps.missyuan.com/uploads/allimg/150502/1-1505021K5310-L.jpg" />       
                <em>明显看到当img标签在hover的时候由于出现边框导致位移</em>
        </div>
<div class="demo2">
                <img src="http://ps.missyuan.com/uploads/allimg/150502/1-1505021K5310-L.jpg" />       
                <em>给每个img添加border:1px solid transparent;世界就和平了</em>               
        </div>
<div class="demo3">
                <img src="http://ps.missyuan.com/uploads/allimg/150502/1-1505021K5310-L.jpg" />
                <em>修改width和height,世界继续和平</em>                               
        </div>
</body>
</html>

图怪兽

TOP

引用:
img:hover{border:1px red solid;}
        .demo2 img{border:5px solid transparent;}
        .demo2 img:hover{border:5px red solid;}
        .demo3 img:hover{width:270px;height:207px;border:5px solid yellow;}
发现一处笔误 第一个demo2应该是demo1吧

TOP

回复 沙发 shenxian2013 的帖子

不好意思

TOP

多谢分享!!!!

TOP


TOP

原来大神的操作是这样的 ,加油

TOP

发新话题

关于本站 广告服务 联系我们 版权隐私 合作站点 网站地图 免责申明 管理团队

Powered by Discuz Copyright © 2005-2019 www.MissYuan.com All rights reserved.