我现在正在努力解决这个问题，现在还要解决它。 我已经阅读了很多文档，并在最黑暗的角落搜索。 有一些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一切都变灰时。
非常感谢有人可以帮我解决这个问题。
答案 0 :(得分：0)
在版本1中，您只使用类之间的更改。在版本2中，css动画有一个根本性的变化。
您应该使用转换，它可以处理伪类和类更改，但您需要在css中使用“transition”。
过渡： https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions
这是我的第3版： http://fiddle.jshell.net/sPUR2/
EDITED： 哦，我的上帝！我认为这绝对是我理解你的问题
第一步：请将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(...);
将事件委托给每个侧边栏，将no委托给主容器。你的version1运行是因为#home_top，＃home_left，＃home_right有“position：absolute;”属性和您的部分#epic_home取0像素的高度。
我认为这种布局需要进行一些更改，但您可以从上面提到的开始。