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

网站建设知识之实现鼠标移开图片变暗,方法一利用css样式:
样式代码:
div{
float: left;
width: 180px;
height: 180px;
margin: 0auto;
background: url(xinyisheji.webp) 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=" http://www.xinyisheji.net/" style="filter: alpha

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

(1)"/>


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

明出处!

Copyright2006-2013 xinyisheji.com
同乐城平台出品-北京网站建设,北京网站设计,北京网站制作,我们值得信赖. 京 ICP备:10043999
htm网站地图 | xml网站地图 | 网站统计
+86-010-82967418 52431618  
xinyidesign@126.com  
www.xinyisheji.net www.xinyisheji.com  
北京市海淀区西三旗上奥世纪中心B-8层  
QQ在线咨询
  • 点击这里给我发消息
  • 点击这里给我发消息
  • 点击这里给我发消息
售后咨询热线
点击这里给我发消息
010-82967418