灰度鼠標移至徽標的顏色效果在FireFox中不起作用

我最近實現了一些CSS代碼，以使我的徽標以灰度顏色開始，當用戶將鼠標移到它上面時，徽標變爲彩色。它在Chrome中運行良好，但是在FireFox中，只有將鼠標懸停在徽標上時，該徽標纔可見。有誰知道如何解決這個問題？灰度鼠標移至徽標的顏色效果在FireFox中不起作用

enter image description here

CSS：

#logos img { 
filter: url('js/filters.svg#grayscale'); /* Firefox 3.5+ */ 
filter: gray; /* IE6-9 */ 
-webkit-filter: grayscale(1); /* Webkit Nightlies & Google Chrome Canary */ 
opacity: .5; 
padding: 20px; 
} 

#logos img:hover { 
filter: none; /* Applies to FF + IE */ 
-webkit-filter: grayscale(0); 
opacity: 1; 
-webkit-transition: 0.3s all ease-in; 
-o-transition: 0.3s all ease-in; 
-moz-transition: 0.3s all ease-in; 
transition: 0.3s all ease-in; 
}

HTML：

<section style="z-index:1; background-color:#f5f5f5;"> 
    <section class="container"> 
     <center> 
     <div id="logos" class="col-md-12"> 
     <a href="#" target="_blank"><img src="images/dell_logo.png" alt="" title=""/></a> 
     <!--<a href="#" target="_blank"><img src="images/centos_logo.png" alt="" title=""/></a>--> 
     <a href="#" target="_blank"><img src="images/endian_logo.png" alt="" title=""/></a> 
     <a href="#" target="_blank"><img src="images/ccsp_logo.png" alt="" title=""/></a> 
     <a href="#" target="_blank"><img src="images/bbb_logo.png" alt="" title=""/></a> 
     <a href="#" target="_blank"><img src="images/microsoft_logo.png" alt="" title=""/></a> 
     </div> 
     </center> 
    </section>

來源

2014-04-13 redshift

我知道爲什麼發生這種情況，我不知道我知道如何解決它。

filter: url('js/filters.svg#grayscale'); /* Firefox 3.5+ */ 
filter: gray; /* IE6-9 */

您設置的CSS屬性filter兩個值，這意味着後者將被分配，所以這第一行不影響filter值。

我最好的猜測是將-moz-filter用於Firefox。

-moz-filter: url('js/filters.svg#grayscale'); /* Firefox 3.5+ */ 
    filter: gray; /* IE6-9 */

而且，我敢肯定，你可以做

-moz-filter: grayscale(1); /* Firefox 3.5+ */

如您在-webkit-filter

來源

2014-04-13 22:48:03 ThatWeirdo

完美。我只是忘了添加-moz-聲明。多謝你們！ – redshift

做如果我加載頁面啓用Firebug，我得到以下錯誤：

NetworkError: 404 Not Found - http://ogmda.com/si2s/js/filters.svg"

因此，它根本無法找到您的SVG文件。

來源

2014-04-13 22:51:52

灰度鼠標移至徽標的顏色效果在FireFox中不起作用

回答

相關問題