我已经为此苦苦挣扎了几天，但尚未解决。 我已经阅读了很多文档并在最黑暗的 Angular 落进行了谷歌搜索。 有一些实际讨论这个问题的 stackoverflow 链接讨论，例如:Greyscale Background Css Images
简而言之:我正在尝试使用彩色版本和灰色版本的侧边栏、羽毛、文本和中间的鹰。当你mouseenter在任何侧边栏上都需要有这些东西的彩色版本。当你mouseleave一切都变成灰色。
经过几天的努力，我设法得到了两个不同的结果。
版本 1。我使用了两个 <div>'s对于每个图像。例如。
http://fiddle.jshell.net/zPGwY/
版本 2。我用了一个 <div>对于每个图像。
但是不能得到和版本1一样的fadeIn和fadeOut效果。过渡更明显一点。老鹰似乎消失了片刻，然后彩色老鹰逐渐淡入。请注意，我的 jQuery 对于此版本可能很糟糕，所以请继续进行更改。
http://fiddle.jshell.net/gB6Sx/5/
我想使用 HTML 和 CSS 的第二个版本，让转换像在第 1 版中一样发生(更平滑)。所以当你mouseenter任何侧边栏、鹰、羽毛(那个侧边栏的)、文本(那个侧边栏的)和那个侧边栏本身都会变色。
当你mouseleave一切都变成灰色。
如果有人能帮我解决这个问题，非常感谢。
最佳答案
在版本 1 中，您仅使用类之间的更改。在版本 2 中，CSS 动画发生了根本性的变化。
您应该使用过渡，它与伪类和类更改一起使用，但您需要在您的 css 中使用“过渡”。
过渡: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions
这是我的版本 3: http://fiddle.jshell.net/sPUR2/
编辑: 我的天啊!我想我绝对理解你的问题
第一步:请将 CSS 更改为过渡。
第二步:
使用此 HTML:
<section id="epic_home">
<div id="home_top">...
<div id="home_right">...
<div id="home_left">...
</section>
不要这样做:
$("#epic_home").on(...);
这样做:
$("#home_top").on(...);
$("#home_right").on(...);
$("#home_left").on(...);
将事件委托(delegate)给每个侧边栏，不委托(delegate)给主容器。你的 version1 运行是因为#home_top、#home_left、#home_right 有“position: absolute;”属性和您的 #epic_home 部分的高度为 0 像素。
我认为此布局需要进行一些更改，但您可以从上面提到的开始。
关于javascript - jQuery 转换无法正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23292471/