更改 div 的 z-index，鼠标悬停时具有淡入淡出效果
我有 4 张图像堆叠在一起，如下所示： 
我试图实现两件事：
当鼠标悬停在背景图像上时， 图像应该以褪色效果出现在前景中。有 每个图像下方还有不同的文本，该文本应该出现在 前景。 （那里不需要褪色）
结果应该是这样的：
每 10-15 秒 (没有用户输入），右侧的下一个图像应该淡入 自动。
从技术上讲，我考虑过将每个图像和文本放入单独的 div 中，并使用 z 顺序。淡入淡出效果也许可以使用 jquery 来实现，但不幸的是我以前没有使用过。
非常感谢任何示例代码、具体帮助或指针。
谢谢！
I have 4 images stacked on top of each other, see below:
I'm trying to achieve two things:
When the mouse is over an image that is in the background, that
image should come to the foreground with a fading effect. There is
also different text below each image, that text should come to the
foreground. (no fading needed there)The result should be like this:
Every 10-15 seconds (without user input), the next image on the right should fade in
automatically.
Technically, I thought about putting each image and text into a separate div, and playing with the z-order. The fading effect could maybe be achieved using jquery, but I've not used that before, unfortunately.
Any example code, specific help or pointers is greatly appreciated.
Thanks!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
尽管不可能通过元素的 z-index 来控制元素的淡入淡出
我们总是可以欺骗我们的眼睛所看到的。
演示画廊
要实现这一点，我们可以执行以下操作：
src属性并将其设置为背景图像如果您有任何问题，请告诉我，我可以评论我的代码以使我使用的步骤更加清晰。
快乐编码
Although it's impossible to control the fade of an element through his z-index
we can always trick what our eyes see.
DEMO GALLERY
To achieve that we can do:
srcattribute of the current image and set it as his background imageLet me know if you have some issues, I can comment my code to make clearer the steps I used.
Happy coding
看看这个插件。只要探索一下，它就有数百种不同的效果，您可能会想在您的案例中使用它们。
http://jquery.malsup.com/cycle/browser.html
Take a look at this plugin. Just explore it, this has got 100s of different effects which you might like to use in your case.
http://jquery.malsup.com/cycle/browser.html