我无法找到具体的解决方案，所以我希望有人可以帮助我。
我有3张图片，我想将它们从第一张图片交叉淡化到第二张图片，然后鼠标悬停在第三张图片上，然后停留在那里，然后在鼠标移出后向后循环。
鼠标悬停|原始图像＆gt; <图2>图3 |停止
鼠标输出| <图3> <图2>原始图片|停止
我认为最好使用JQuery，但欢迎使用任何解决方案。
http://css3.bradshawenterprises.com/cfimg/
这里的演示1适用于两幅图像，但由于图像具有透明区域，因此它们相互重叠，但图像之间的淡化效果非常完美。
更新
我认为我已经使用CSS完成了它，基于该网站的Demo 1，我做了这个
#Logo {position:absolute; z-index: 1; width: 250px; height: 120px;}
#Logo:after {content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; right: 0; background: url(images/Logo3.png); opacity: 0;
transition: opacity .5s ease-in-out;}
#Logo:hover:after {opacity: 1;
transition: opacity .5s .65s ease-in-out;}
#Logo img.A {position:absolute;
transition: opacity .5s .65s ease-in-out;}
#Logo img.A:hover {opacity: 0;
transition: opacity .5s ease-in-out;}
<div id="Logo"><img class="A" src="images/Logo.png"><img src="images/Logo2.png"></div>
这似乎对我的目的非常有效，它淡化了第一张图像，只留下了第二张图像，然后淡出第三张图像。然后在鼠标输出时反向相同。但我想知道这是否是最佳方式呢？或者它是否会出现兼容性问题？非常感谢任何帮助。