css - 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 规则，因为它有 better support .这是相同的 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，因为我不确定您通过将图像推到页面其余部分“下面”来尝试完成什么。