Bootstrap的自定义CSS无法正常工作

Question

我正在使用Twitter Bootstrap构建网站，我希望图像一直显示为灰度，直到将鼠标悬停在该位置上为止，此时该图像应变为全彩色。

我没有编辑Bootstrap.css，而是创建了自己的自定义CSS：“ starter-template.css”。
这是“ starter-template.css”中的代码：

.thumbnail2 {
-webkit-filter: grayscale(100%);
z-index: -9999999999999999999999999px;
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
-ms-transition: all 0.9s ease-in-out;
transition: all 0.9s ease-in-out;
}

.thumbnail2:hover {
-webkit-filter: grayscale(0%);
z-index: -9999999999999999999999999px;
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
-ms-transition: all 0.9s ease-in-out;
transition: all 0.9s ease-in-out;
}

这是html：

<!-- Custom styles for this template -->
<link href="static/starter-template.css" type = "text/css" rel="stylesheet">

....

<a href="{{my_link}}"><img class = "thumbnail2" src="{{my_string}}"  align="right" height = "200" width = "200"></a>

但是，没有悬停效果-当页面加载时，图像显示为全彩色，而当我将鼠标悬停在图像上时，图像则保持不变。 有什么建议么？

谢谢！

Answer 1

认为只需修复z-index： http ： //jsfiddle.net/c8wtbjfw/

.thumbnail2 {
    -webkit-filter: grayscale(100%);
    z-index: -9999999999999999999999999;
    -webkit-transition: all 0.9s ease-in-out;
    -moz-transition: all 0.9s ease-in-out;
    -o-transition: all 0.9s ease-in-out;
    -ms-transition: all 0.9s ease-in-out;
    transition: all 0.9s ease-in-out;
}
.thumbnail2:hover {
    -webkit-filter: grayscale(0%);
    z-index: -9999999999999999999999999;
    -webkit-transition: all 0.9s ease-in-out;
    -moz-transition: all 0.9s ease-in-out;
    -o-transition: all 0.9s ease-in-out;
    -ms-transition: all 0.9s ease-in-out;
    transition: all 0.9s ease-in-out;
}

当我在Chrome（36.0.1985.143）中对其进行测试时，似乎可以正常工作。 由于这是Webkit筛选器，因此无法在IE或基于Gecko的浏览器中使用。

一种替代方法是转换opacity规则，因为它具有更好的支持 。 这是相同的CSS，但是具有不透明性： http : //jsfiddle.net/c8wtbjfw/1/

.thumbnail2 {
    opacity: .5;
    -webkit-transition: all 0.9s ease-in-out;
    -moz-transition: all 0.9s ease-in-out;
    -o-transition: all 0.9s ease-in-out;
    -ms-transition: all 0.9s ease-in-out;
    transition: all 0.9s ease-in-out;
}
.thumbnail2:hover {
    opacity:1;
    -webkit-transition: all 0.9s ease-in-out;
    -moz-transition: all 0.9s ease-in-out;
    -o-transition: all 0.9s ease-in-out;
    -ms-transition: all 0.9s ease-in-out;
    transition: all 0.9s ease-in-out;
}

我确实删除了您的z-index ，因为我不确定您要通过将图像“压入”页面其余部分来实现什么目的。

Answer 2

尝试这个：

.thumbnail2 {
    filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
    filter: gray; /* IE5+ */
    -webkit-filter: grayscale(100%); /* Webkit Nightlies & Chrome Canary */
    z-index: -9999999999999999999999999;
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
-ms-transition: all 0.9s ease-in-out;
transition: all 0.9s ease-in-out;
}

.thumbnail2:hover {
    filter: none;
    -webkit-filter: grayscale(0);
    z-index: -9999999999999999999999999;
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
-ms-transition: all 0.9s ease-in-out;
transition: all 0.9s ease-in-out;
}