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


												


											
CSS鼠标悬停图片加边框效果,不位移的方法的更多相关文章
	

    
								
  1. CSS鼠标悬停图片加边框效果，页面布局发生错位的解决办法
		
    CSS鼠标悬停图片加边框效果,页面布局发生错位的解决办法 .recomend-list{ width:1200px; a{ @extend %fl; margin-right: 30px; width ...
    
		
    2. 
						
  2. 基于html5鼠标悬停图片动画展示效果
		
    分享一款基于html5鼠标悬停图片动画展示效果.里面包含两款不同效果的html5图片展示效果.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=" ...
    
		
    3. 
						
  3. 运用CSS高斯模糊添加图片加载效果
		
    <!DOCTYPE html> <html> <head> <title>大图片加载从模糊到清晰</title> </head> ...
    
		
    4. 
						
  4. CSS3鼠标悬停图片上浮显示描述代码
		
    效果:http://hovertree.com/texiao/css3/20/ 效果图: 代码如下: <!doctype html> <html lang="zh" ...
    
		
    5. 
						
  5. jQuery css3鼠标悬停图片显示遮罩层动画特效
		
    jQuery css3鼠标悬停图片显示遮罩层动画特效 效果体验:http://hovertree.com/texiao/jquery/39/ 效果图: 源码下载:http://hovertree.co ...
    
		
    6. 
						
  6. HTML5+CSS3鼠标悬停图片特效
		
    点击预览效果            下载该特效: HTML5+CSS3鼠标悬停图片特效.zip 特效说明: 一款HTML5+CSS3鼠标悬停图片事件网页特效,集合了最流行鼠标悬停图片文字.图片动画移动 ...
    
		
    7. 
						
  7. 通过CSS3实现：鼠标悬停图片360度旋转效果
		
    效果很好玩,代码很简单: 效果: 鼠标放置在图片上:360度顺时针旋转 鼠标离开图片:图片260度逆时针旋转 只要将下面代码拷贝过去,并将图片改成你想要的就可以看到效果 <!doctype ht ...
    
		
    8. 
						
  8. jQuery - 点击图片加边框
		
    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
    
		
    9. 
						
  9. jQuery鼠标悬停内容动画切换效果
		
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. ubuntu 配置vim（vimrc)
			
    打开终端:ctrl+alt+t 进入vim文件:cd /etc/vim 打开vimrc文件:sudo gedit vimrc 然后在行末if语句前加上下面的内容,"  这个符号为注释,后面内 ...
    
			
    2. 
						
  2. fastdfs-nginx扩展模块源码分析
			
    FastDFS-Nginx扩展模块源码分析 1. 背景 在大多数业务场景中,往往需要为FastDFS存储的文件提供http下载服务,而尽管FastDFS在其storage及tracker都内置了htt ...
    
			
    3. 
						
  3. js获取ip地址
			
    方法三(所有的平台及浏览器):使用的搜狐接口 <script src="http://pv.sohu.com/cityjson?ie=utf-8"></scrip ...
    
			
    4. 
						
  4. 简述Session
			
    Session的原理 1.session技术的概述 * session是服务器端技术 * 服务器在运行时可以为每一个用户的浏览器创建一个其独享的session对象 * 由于session为用户浏览器独 ...
    
			
    5. 
						
  5. JAVA访问权限
			
      同一个类 同一个包 不同包的子类 不同包的非子类 Private √       Default √ √     Protected √ √ √   Public √ √ √ √
    
			
    6. 
						
  6. 【FTP】FTP文件上传下载-支持断点续传
			
    Jar包:apache的commons-net包: 支持断点续传 支持进度监控(有时出不来,搞不清原因) 相关知识点 编码格式: UTF-8等; 文件类型: 包括[BINARY_FILE_TYPE(常 ...
    
			
    7. 
						
  7. 解决未能加载文件或程序集“Newtonsoft.Json ...."或它的某一个依赖项。找到的程序集清单定义与程序集引用不匹配。 (异常来自 HRESULT:0x80131040)
			
    今天遇到了一个比较坑的问题,琢磨了好久... 因为需要引用一个第三方的类库,三方的类库引用的是Newtonsoft.Json.dll 版本7.0.0而我的项目中引用的是Newtonsoft.Json. ...
    
			
    8. 
						
  8. 真机调试时遇到“Could not launch *** process launch failed: Security”的解决办法
			
    半年没写ios程序了,打算重新将这块技术捡回来.谁知道写的第一个测试程序在真机上就跑出来因为安全问题不能加载的情况. ios的版本是9.2的.看提示信息是app的启动被ios的安全机制阻挡了. 在手机 ...
    
			
    9. 
						
  9. MySQL绿色版的安装（mysql-5.6.22-win32.zip）
			
    1.数据库下载 Mysql官方网站:http://www.mysql.com/,数据库下载地址:http://www.mysql.com/downloads/.从官方网站可以找到两种文件包,一种是ex ...
    
			
    10. 
						
  10. OAF_开发系列01_实现OAF资料主从关系Master-Detail联动（案例）
			
    2014-06-02 Created By BaoXinjian
    
			
    11.