分类
前端技术

CSS打造图片鼠标悬停效果

这个效果往往我们会用到JS特效,但是个人不是很喜欢这样的效果,因为要给网站带来一些负担,特别是不是很懂JS的如果去用人家的JS例子来修改,往往会附加很多的垃圾文件,可能你仅仅需要一个悬停效果按这个JS里面却附加了很多不必要的元素,所以我觉得用CSS是最方便也是最好的,而且只需要简单的几句css就搞定,也许效果没JS好但是,目的是一样的。

下面我来介绍下如何来实用这个效果:

我只在这里给大家介绍方法,实际操作请大家百度,因为这样我们更能学到东西

首先我们定义一个图片:

<div class=”tupian”><a href=”#” ><img src=”图片地址” alt=”” width=”187px” height=”220px”/><div class=”xuanting”>悬停内容</div></a></div>

然后定义CSS:

.tupian {border:1px solid #EEE;background:#F9F9F9;overflow:hidden;position:relative;}
.tupian img{display:block;margin:0 auto;max-width:210px;height:auto;width:expression(this.width > 210 ? “210px” : this.width); /**用来在IE中自动缩放这里用来缩小首页面的图片的。**/}
.tupian a{position:relative;display:block;}
.tupian a:hover .xuanting{position:absolute;display:block;top:0px;left:0;background:#666;}

基本上效果就出来了。具体的效果就是 鼠标移动上去就显示悬停内容。鼠标不在图片上就没有效果。

CSS打造图片鼠标悬停效果

 

 

 

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注