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的{{1}}。然后在悬停时，只需将background-image缩减为opacity。

Demo

修改

将来您可以使用CSS 0属性。目前仅由filter支持。它就像

一样简单

-webkit

你已经完成了。但目前只是

img {
    filter: invert(100%);
}

Proof of concept（使用img { -webkit-filter: invert(100%);` /*-moz -o -ms all are unimplimented*/ }或chrome查看效果）

+filter(W3C)

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

1 个答案:

修改