<!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. SQL增删改语句常用
			
    创建table: create table tab_name( col1 type; 约束:主键-外键-非空-检查-唯一 col2 type; ); 删除表 : drop table tab_name ...
    
			
    2. 
						
  2. multithreading - Reader/Writer Locks in C++
			
    You Only Need To Note This: only 1 single thread can acquire an upgrade_lock at one time. others are ...
    
			
    3. 
						
  3. .Net Office开源组件
			
    1.NPOI NPOI 是 POI 项目的 .NET 版本.POI是一个开源的Java读写Excel.WORD等微软OLE2组件文档的项目.使用 NPOI 你就可以在没有安装 Office 或者相应环 ...
    
			
    4. 
						
  4. browser shell
			
    我一直坚信,做项目需要通过文档来总结.一来可以梳理自己的项目和思路,二来可以备忘,三则可以为有同样需求的朋友提供一些参考.如果一直不进行总结,真的很可能是写了多年的代码,却只有一年的经验.当学习一项新 ...
    
			
    5. 
						
  5. SSL/TLS算法流程解析
			
    SSL/TLS 早已不是陌生的词汇,然而其原理及细则却不是太容易记住.本文将试图通过一些简单图示呈现其流程原理,希望读者有所收获. 一.相关版本 Version Source Description  ...
    
			
    6. 
						
  6. CPU利用率异常的分析思路和方法交流探讨
			
    CPU利用率异常的分析思路和方法交流探讨在生产运行当中,经常会遇到CPU利用率异常或者不符合预期的情况,此时,往往暗示着系统性能问题.那么究竟是核心应用的问题?是监控工具的问题?还是系统.硬件.网络层 ...
    
			
    7. 
						
  7. winform中ComboBox实现text和value，使显示和值分开，重写text和value属性
			
    winform的ComboBox中只能赋值text,显示和值是一样的,很多时候不能满足根本需要,熟悉B/S开发的coder最常用的就是text和value分开的,而且web下DropDownList本 ...
    
			
    8. 
						
  8. WPF中TreeView的使用
			
    因为项目中需要用到TreeView控件,由于是第一次在WPF中用到,因此事先在网上搜了很多关于数据绑定的方法介绍,个人经过实际应用,觉得WPF中的HierarchicalDataTemplate定义模 ...
    
			
    9. 
						
  9. maven依赖本地非repository中的jar包
			
    依赖项的作用域 在定义项目的依赖项的时候,我们可以通过scope来指定该依赖项的作用范围.scope的取值有compile.runtime.test.provided.system和import. c ...
    
			
    10. 
						
  10. Thread.join简单介绍
			
    百度了一下,终于明白了.这个解释最简单: 前提:join()方法肯定是被某个线程调用的.   A线程正在执行,突然执行的时候碰到了B.join(), 那么,A线程就必须要等到B线程执行完之后才能执行. ...
    
			
    11.