css - img：悬停过渡与给定变量不匹配

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与它无关。

您可以放入imageadiv并将其他图像设置为div's background-image。然后在悬停时减少opacity到0.

演示

编辑

将来您可以使用 CSSfilter属性。目前它仅由-webkit. 它会很简单

img {
    filter: invert(100%);
}

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

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

概念证明（使用chrome或safari查看效果）

+ filter(W3C)