css - 图片 :hover transition not matching given variable

Question

http://coreytegeler.com/new/单击向上箭头并将鼠标悬停在图中以查看我在说什么

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

您应该可以在下面的链接中看到我的样式表，它非常小，但我想我会让你们看到全部而不是我正在谈论的特定行，因为我相信可能会有冲突. http://coreytegeler.com/new/css/style.css

#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。

Demo

编辑

将来您可以使用 CSS filter 属性。目前仅由 -webkit 支持。就这么简单

img {
    filter: invert(100%);
}

你就完成了。但目前它只是

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

Proof of concept (用chrome或者safari看效果)

+filter(W3C)