Question

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

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

.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，因为我不确定您是通过推送图片＆＃34;＆＃34;来实现的。页面的其余部分。

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;
}

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

2 个答案: