img：悬停转换与给定变量不匹配

Question

好吧，我正在尝试在剪影悬停时创建反转效果，我已经让所有 CSS 进行相应更改，并使用一些较小的 JS 来替换图像，但图像的淡入淡出过渡比其他所有内容都要快得多。即使将时间设置得远远超过应有的时间，它似乎也不会产生影响。

您应该能够在下面的链接中看到我的样式表，它很小，但我想我会让你们看到全部内容，而不是我正在谈论的特定行，因为我相信可能会发生冲突。

#shadow {
    width:33%;
    -webkit-transition: all 2.2s ease-in-out;
    -moz-transition: all 2.2s ease-in-out;
    -o-transition: all 2.2s ease-in-out;
    transition: all 2.2s ease-in-out;   
}
#shadow:hover {
    -webkit-transition: all 2.2s ease-in-out;
    -moz-transition: all 2.2s ease-in-out;
    -o-transition: all 2.2s ease-in-out;
    transition: all 2.2s ease-in-out;   
}

Answer 1

您的代码无法在

:hover

上运行，因为您只是更改了 img 的来源。 CSS 与此无关。

您可以将

image

放入

div

中，并将其他图像设置为

div

的

background-image

。然后悬停时只需将

opacity

减少到

0

。

演示

编辑

将来你可以使用 CSS

filter

属性。目前它仅得到

-webkit

的支持。就这么简单

img {
    filter: invert(100%);
}

你就完成了。但目前只是

img {
    -webkit-filter: invert(100%);`
    /*-moz -o -ms all are unimplimented*/
}

概念证明（使用

chrome

或

safari

查看效果）

+

filter

(W3C)