提问--鼠标滑过黑白转彩色的效果

vivi12

在制作网站的过程中，遇到一个难题，请高人指点一下吧

http://xnhecs2.shsx7.515ip.net/iidius/neiye1.html

如图中左侧的插图这般，实现了插图是黑白的，但鼠标滑过便出现了原有的色彩

现在发现这一效果只在ie下有用，chrome下没有反应，还是彩色的

制作人员找了半天代码都没有发现，请问有解决办法吗，谢谢了

vivi12

      多谢版主审核

zz`s

http://www.staggeringbeauty.com/
还是这个厉害，，晃几下鼠标

shuangxinbao

好神奇，F12看了半天居然没找到 ahover

tinghai

页面使用的text.css第11行中的 filter:gray; 是IE独有的式样，不适用于chrome。
用css的话，img：hover {background:url("彩色图片path");}就可以了吧。不过首先要准备两张图片

xinsu

shuangxinbao 发表于 2012-8-17 00:20
好神奇，F12看了半天居然没找到 ahover

在css里头。

A:hover IMG {FILTER:
}
.rollBox{width:940px;overflow:hidden;padding:12px 0 5px 6px;}
.rollBox .LeftBotton{height:300px;width:30px;background:url(left.gif) no-repeat 0 120px;overflow:hidden;float:left;display:inline;margin:25px 0 0 0;cursor:pointer;}
.rollBox .RightBotton{height:300px;width:30px;background:url(right.gif) no-repeat 0 120px;overflow:hidden;float:left;display:inline;margin:25px 0 0 0;cursor:pointer;}
.rollBox .Cont{width:870px;overflow:hidden;float:left;}
.rollBox .ScrCont{width:10000000px;}
.rollBox .Cont .pic{width:290px;float:left;text-align:center;}
.rollBox .Cont .pic img{padding:4px;background:#fff;border:1px solid #ccc;display:block;margin:0 auto;}
.rollBox .Cont .pic p{line-height:26px;color:#505050;}
.rollBox .Cont a:link,.rollBox .Cont a:visited{color:#626466;text-decoration:none;}
.rollBox .Cont a:hover{color:#f00;text-decoration:underline;}
.rollBox #List1,.rollBox #List2{float:left;}

xinsu

参考一下这个吧。
火狐firefox,IE,网站变灰变黑兼容代码

http://www.cssk8.com/html/css_Tutorial/201004/23-2234.html

vivi12

zz`s 发表于 2012-8-17 00:16
http://www.staggeringbeauty.com/
还是这个厉害，，晃几下鼠标

哈哈哈，谢谢。这个太酷了不适合公司主页

vivi12

tinghai 发表于 2012-8-17 01:21
页面使用的text.css第11行中的 filter:gray; 是IE独有的式样，不适用于chrome。
用css的话，img：hover {ba ...

您说的换两张图的方法制作人员说要重新制作后台。。。

vivi12

xinsu 发表于 2012-8-17 01:58
参考一下这个吧。
火狐firefox,IE,网站变灰变黑兼容代码

您好，这个方法不需要5L说的那样换两张图吧