<!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. get------引用接口
			
    关于引用接口   1.    通过get方式 2.   String  poiUrl="http://接口地址?接口ID=接口给你的ID&参数1=?&参数2=?&参数 ...
    
			
    2. 
						
  2. UVA 10474
			
    题意:给你一组数,再给几个数问是否在一组数中. 题很简单:STL入门. 没用到STL. #include<iostream> #include<cstdio> #include ...
    
			
    3. 
						
  3. Sort merge join、Nested loops、Hash join（三种连接类型）
			
    目前为止,典型的连接类型有3种: Sort merge join(SMJ排序-合并连接):首先生产driving table需要的数据,然后对这些数据按照连接操作关联列进行排序:然后生产probed  ...
    
			
    4. 
						
  4. Android学习八：获取网络图片
			
    看到QQ群里有个朋友说加载图片内存溢出的问题,所以就按照自己的想法试试的.但是按照他的方法,不知道为何没有发生内存溢出,不知道什么情况. 写这篇文章主要有三个目的: 1.多线程的学习 2.图片加载的学 ...
    
			
    5. 
						
  5. vnc--centos 7 安装和配置
			
    安装步骤: 1.首先试试服务器装了 VNC 没 rpm -q tigervnc tigervnc-server 没安装的话会直接出现package tigervnc is not installedp ...
    
			
    6. 
						
  6. 【MVC】ASP.NET MVC Forms验证机制
			
    http://www.cnblogs.com/bomo/p/3309766.html 随笔 - 121  文章 - 0  评论 - 92 [MVC]ASP.NET MVC Forms验证机制 ASP. ...
    
			
    7. 
						
  7. mybaits中插入到mysql数据库自动返回id主键
			
    在做电商项目时,做到添加商品时,添加商品涉及到图片表和最小销售单元表,这两个表有商品的id,添加图片和最小销售单元,要先返回产品的id.具体做法如下 <insert id="addPr ...
    
			
    8. 
						
  8. winform设置button的边框颜色，或取消边框颜色，不显示边框
			
    // winform设置边框颜色不像webform那么简单,可以通过设置FlatAppearance,也可以通过重绘实现. 一.设置按钮本身属性 buttonBubufx.FlatStyle = Fl ...
    
			
    9. 
						
  9. Comparable和Comparator实现对象比较
			
    由文生义: 继承Comparable ,表示该类的实例是可以相互比较的; 继承Comparator,表示该类是一个比较器,里面设置了按什么属性比较,list需要按这个比较器里的规则来比较; 使用方法如 ...
    
			
    10. 
						
  10. 解决错误: Failed to load class "org.slf4j.impl.StaticLoggerBinder"
			
    当报这个错时,就很难看到我们自己输出的日志,系统运行情况后台无法得到输出.解决方案是加入以下依赖: <dependency> <groupId>org.slf4j</gr ...
    
			
    11.