首页 > 代码库 > 兼容IE6下，各种浏览器，鼠标滑动img图片阴影效果
兼容IE6下，各种浏览器，鼠标滑动img图片阴影效果
兼容IE6下，各种浏览器，鼠标滑动img图片阴影效果
以下为源码：
Html源码
mutal为事件触发层
shade为遮罩层
mutual内不要有空格，不然ie6下会有text的bug，会导致阴影加高。
<!-- mutual 标签内不要有空格 -->
<a class="mutual" href=""><img src="" width="237" height="358"><div class="shade"></div></a>
Css源码：（less形式）
shade层需要绝对定位，top，left，right，bottom，均为零。背景图片shade.jpg，可以是一个1px*1px的纯黑色背景图片，通过repeat进行平铺。原始透明度为0即为全透明。
mutual:hover下更改shade遮罩层的透明度，使之变为一个透明的阴影层。
IE6下shade必须要有高度才能显示出来。需要添加_height.
.mutual{ display: block; width: 237px; height: auto; position: relative; _overflow:hidden; img{ width: 237px; border: 0px;
vertical-align:top; } .shade{ background: url(../css/img/shade.jpg) repeat; filter:alpha(opacity=00); -moz-opacity:0.0; -khtml-opacity: 0.0; opacity: 0.0; position: absolute; top: 0px; right: 0px; left: 0px; bottom: 0px; width: 100%; _height:1000px; cursor: pointer; }&:hover{ .shade{ filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; }}
兼容IE6下，各种浏览器，鼠标滑动img图片阴影效果
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。