我找不到具体的解决方案，所以我希望有人可以帮助我。
我有 3 张图像，我想在鼠标悬停或悬停在那里时将它们从第一张图像交叉淡入淡出到第二张和第三张，然后在鼠标移出时向后循环。
鼠标悬停 | 原图 > 图 2 > 图 3 | 停止
鼠标移出 | 图片 3 > 图片 2 > 原始图片 | 停止
我想最好使用 JQuery，但欢迎任何解决方案。
http://css3.bradshawenterprises.com/cfimg/
这里的Demo 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>
这对我的目的来说似乎工作得很好，它会淡出第一张图像，只留下第二张图像，然后淡入第三张图像。然后在鼠标移出时反向执行相同操作。但我想知道这是否是最好的方法？或者它是否会有兼容性问题？任何帮助是极大的赞赏。