【发布时间】：2014-01-25 16:00:54
【问题描述】：
我正在尝试使我的网站浏览器与图像悬停时的过渡灰度渐变兼容，它适用于 Chrome 和 Opera，但不适用于 Firefox，我不知道为什么，因为我有 Mozilla 浏览器的特定于浏览器的代码。
这是我的代码（尽管您要查看的主要代码是 CSS 中的 img 和 img:hover）：
<!doctype html>
<html>
<head>
<title>Basketball Uniforms 1/24/14</title>
<style>
* {
margin: 0;
font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
}
html {
background: url(assets/background.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
header {
width: cover;
padding: 2em;
background-color: rgba(17, 40, 87, 0.85);
border-radius: 0 0 2em 2em;
}
h1 {
text-align: center;
vertical-align: middle;
color: #FFBB00;
}
h2 {
text-align: center;
vertical-align: middle;
color: #FFBB00;
}
h3 {
text-align: center;
vertical-align: middle;
color: #FFBB00;
}
table {
margin-left: auto;
margin-right: auto;
border-collapse: separate;
border-spacing: 0 2em;
}
td {
border-style: groove;
border-width: 2em;
border-color: rgba(59, 59, 59, 0.95);
border-radius: 4em;
padding: 4em;
}
.odd {
background-color: rgba(242, 153, 51, 0.80);
color: #22499C;
}
.even {
background-color: rgba(51, 112, 242, 0.80);
color: #FEBB2D;
}
img {
width: 26em;
height: 20em;
border-radius: 1em;
transition: filter 1.5s ease;
-ms-transition: -ms-filter 1.5s ease;
-o-transition: -o-filter 1.5s ease;
-webkit-transition: -webkit-filter 1.5s ease;
-moz-transition: -moz-filter 1.5s ease;
}
img:hover {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: url(assets/grayscale.svg);
filter: gray;
}
h4 {
padding-top: 1em;
text-align: center;
}
h5 {
text-align: center;
}
footer {
width: cover;
padding: 2em;
background-color: rgba(17, 40, 87, 0.85);
border-radius: 2em 2em 0 0;
}
</style>
</head>
<body>
<header>
<h1>Basketball Uniforms Through the Ages</h1>
<h2>Leo Alfred: 1/24/2013</h2>
</header>
<table>
<tr>
<td class="odd">
<a href="http://uniformcritics.com/basketball/nba/portland-trail-blazers/1970-trail-blazers-debut-road-uniform-vintage-retro-throwback/">
<img src="assets/1970.jpg" title="1970's Basketball" alt="1970's Basketball">
</a>
<h4>Portland Trail Blazers</h4>
<h5>1970 - 1971 Debut Road Uniform</h5>
</td>
</tr>
<tr>
<td class="even">
<a href="http://uniformcritics.com/basketball/nba/golden-state-warriors/1980s-warriors-away-california-uniform-vintage-retro-throwback/">
<img src="assets/1980.jpg" title="1980's Basketball" alt="1980's Basketball">
</a>
<h4>Golden State Warriors</h4>
<h5>1980 - 1985 Road Uniform</h5>
</td>
</tr>
<tr>
<td class="odd">
<a href="http://uniformcritics.com/basketball/nba/milwaukee-bucks/1990s-bucks-road-uniform-throwback/">
<img src="assets/1990.jpg" title="1990's Basketball" alt="1990's Basketball">
</a>
<h4>Milwaukee Bucks</h4>
<h5>1993 - 2005 Road Uniform</h5>
</td>
</tr>
<tr>
<td class="even">
<a href="http://uniformcritics.com/basketball/nba/la-clippers/2000s-clippers-away-uniform-red/">
<img src="assets/2000.jpg" title="2000's Basketball" alt="2000's Basketball">
</a>
<h4>LA Clippers</h4>
<h5>2000 - 2009 Away Uniform</h5>
</td>
</tr>
<tr>
<td class="odd">
<a href="http://www.spartanjerseys.com/michigan-state-basketball-jersey/2010-2011/">
<img src="assets/2010.jpg" title="2010's Basketball" alt="2010's Basketball">
</a>
<h4>Michigan State Spartans</h4>
<h5>2010-2011 Uniform</h5>
</td>
</tr>
</table>
<footer>
<h2>An LFX Design Website</h2>
<h3>© 2014 LFX Design</h3>
</footer>
</body>
我不知道发生了什么，因为我有：
-moz-transition: -moz-filter 1.5s ease;
还有：
-moz-filter: grayscale(100%);
提前感谢您的帮助！
【问题讨论】：
-
为了更清楚地说明，当我将鼠标悬停在图片上时，它只是消失而不是过渡到灰色渐变。
-
你能提供一个 JSFiidle 吗？
标签： html css css-transitions transition