我的CSS图像悬停效果不能在Firefox或Opera中工作 [英] My CSS Image Hover Effect does not work in Firefox or Opera

问题描述

所以我在我的Wordpress网站上使用CSS图像悬停效果，在Chrome中工作完全正常，但它不工作在Firefox或Opera（当我在这些浏览器中的鼠标滑过我的图像时没有任何反应） p>

我已经阅读过有关可能出现的问题，它可能与div类冲突吗？我不确定。

 
  
  ::  -  moz-selection {
 background-color：＃888; 
 color：#fff; 
} 
 
 :: selection {
 background-color：＃888; 
 color：#fff; 
} 
 
 / * B& W * / 
 .bw {
 -webkit- transition：all .5s ease; 
 -moz-transition：all .5s ease; 
 -o-transition：all .5s ease; 
 -ms-transition：all .5s ease; 
 transition：all .5s ease; 
} 
 
 .bw：hover {
 -webkit-filter：grayscale（100％）; 
} 
 
 .pic {
 float：left; 
 margin：20px; 
 overflow：hidden; 
} 
  

这里是HTML： >

 < div class =bw pic>< a href =http://www.flickr.com/example >< img class =wp-image-998 alignnonetitle =Examplealt =Examplesrc =http://www.flick.com/example.jpgwidth =550height = 386/>< / a>< / div> 
  

例子只是填充。

有关如何修复和优化Firefox和Opera浏览器的建议吗？

解决方案

ve从来没有使用过这个自己，但不是你使用的webkit过滤器不会被firefox支持的问题。我做了一个快速的google，它看起来像你需要-moz-filter：grayscale（100％）;请参阅下面的链接。

http：// pixelhunter.me/post/25782670606/css3-grayscale

不确定以下答案是否更适合与旧版浏览器的兼容性。

So I'm using a CSS Image Hover Effect on my Wordpress website that works completely fine in Chrome, however it does not work at all in Firefox or Opera (nothing happens when I mouseover my image in those browsers).

I've read about possible problems and could it be a conflict with the div class? I'm not sure.

Here's the CSS:

::-moz-selection {
    background-color: #888;
    color: #fff;
}

::selection {
    background-color: #888;
    color: #fff;
}

/*B&W*/
.bw {
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;
}

.bw:hover {
    -webkit-filter: grayscale(100%);
}

.pic {
    float: left;
    margin: 20px;
    overflow: hidden;
}

and here is the HTML:

<div class="bw pic"><a href="http://www.flickr.com/example"><img class="wp-image-998 alignnone" title="Example"alt="Example" src="http://www.flick.com/example.jpg" width="550" height="386" /></a></div>

The example's are just fillers.

Any suggestions on how to fix and optimize this for the Firefox and Opera browsers?

解决方案

I've never used this myself but isn't the problem that you're using a webkit filter which wouldn't be supported by firefox. I've done a quick google and it looks like you need -moz-filter: grayscale(100%); see link below.

http://pixelhunter.me/post/25782670606/css3-grayscale

Not sure if the answer below is better for compatibility with older browsers.

这篇关于我的CSS图像悬停效果不能在Firefox或Opera中工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！