010-82967418
当前位置:网站建设>网络知识
网站建设知识之实现鼠标移开图片变暗
点击量:1763 发布时间:2014-3-1 10:23:54

网站建设知识之实现鼠标移开图片变暗,方法一利用css样式:
样式代码:
div{
float: left;
width: 180px;
height: 180px;
margin: 0auto;
background: url(/xinyisheji.jpg) centercenterno-repeat;
z-index: 1;
}
a{
filter: alpha(opacity=80);
opacity: 0.8;
width: 180px;
height: 180px;
display: block;
background: #333;
z-index: 100;
}
a:hover{
filter: alpha(opacity=0);
opacity: 0;
}
网页调取:

<div><a href="#"></a></div>

方法二:js效果
Js代码:

网站建设知识之实现鼠标移开图片变暗
 

网页调取:

<img id="imgInfo" src="/index.html" style="filter: alpha

(opacity=90);" onmouseover="opacity_change(0)" onmouseout="opacity_change

(1)"/>


两种方式都各有优缺,我们只测试了几个浏览器,大家可以多测试几个浏览器的兼容。
文章由新翼设计北京网站建设公司(http://www.)编辑整理,转载请注

明出处!

Copyright2006-2013 xinyisheji.com
新翼设计出品-北京网站建设,北京网站设计,北京网站制作,我们值得信赖. 京 ICP备:10043999
htm网站地图 | xml网站地图 | 网站统计
+86-010-82967418 52431618  
xinyidesign@126.com  
www. www.xinyisheji.com  
北京市海淀区西三旗上奥世纪中心B-8层  
售后咨询热线
010-82967418