Javascript BG交换！如何为每个旋转图像切换到鼠标输出上的不同背景图像？

因此，多亏了天才的帮助，我成功地创建了一系列在悬停状态下循环的图像。我决定坚持使用图像，因为它比文本更容易使用。关于这个代码，我还有一个问题。我试图使这些图像背后都有相应的背景，因此当用户的鼠标离开相应的图像时，背景也会发生变化。以下是迄今为止的代码：

JSfiddle：

CSS

.hs包装纸{
宽度：1015px；
高度：408px；
位置：相对位置；
保证金：0自动；
溢出：隐藏；
背景：url（“http://www.planwallpaper.com/static/images/colorful-triangles-background_yB0qTG6.jpg");
}
.hs.img{
顶部：0px；
左：0px；
位置：绝对位置；
-webkit动画：showMe 0.8s线性无限向前；
-moz动画：showMe 0.8s线性无限向前；
-o-动画：向我展示0.8s线性无限0s向前；
-ms动画：showMe 0.8s线性无限0秒向前；
动画：showMe 0.8s线性无限向前；
-webkit动画播放状态：暂停；
-moz动画播放状态：暂停；
-o-动画播放状态：暂停；
-ms动画播放状态：暂停；
动画播放状态：暂停；
}
.hs包装器img:n个孩子（1）{
z指数：9；
}
.hs包装器img:n个孩子（2）{
-webkit动画延迟：0.1s；
-moz动画延迟：0.1s；
-o-动画-延迟：0.1s；
-ms动画延迟：0.1s；
动画延迟：0.1s；
z指数：8；
}
.hs包装器img:n个孩子（3）{
-webkit动画延迟：0.2s；
-moz动画延迟：0.2s；
-o-动画-延迟：0.2s；
-ms动画延迟：0.2s；
动画延迟：0.2s；
z指数：7；
}
.hs包装器img:n个孩子（4）{
-webkit动画延迟：0.3s；
-moz动画延迟：0.3s；
-o-动画-延迟：0.3s；
-ms动画延迟：0.3s；
动画延迟：0.3s；
z指数：6；
}
.hs包装器img:n个孩子（5）{
-webkit动画延迟：0.4s；
-moz动画延迟：0.4s；
-o-动画-延迟：0.4s；
-ms动画延迟：0.4s；
动画延迟：0.4s；
z指数：5；
}
.hs包装器img:n个孩子（6）{
-webkit动画延迟：0.5s；
-moz动画延迟：0.5s；
-o-动画-延迟：0.5s；
-ms动画延迟：0.5s；
动画延迟：0.5s；
z指数：4；
}
.hs包装器img:n个孩子（7）{
-webkit动画延迟：0.6s；
-moz动画延迟：0.6s；
-o-动画延迟：0.6s；
-毫秒振荡延迟：0.6s；
动画延迟：0.6s；
z指数：3；
}
.hs包装器img:n个孩子（8）{
-webkit动画延迟：0.7s；
-moz动画延迟：0.7s；
-o-动画延迟：0.7s；
-ms动画延迟：0.7s；
动画延迟：0.7s；
z指数：2；
}
.hs包装器：悬停img{
-webkit动画播放状态：正在运行；
-moz动画播放状态：正在运行；
-o-动画播放状态：正在运行；
-ms动画播放状态：正在运行；
动画播放状态：运行；
}
.hs叠加{
位置：绝对位置；
宽度：100%；
身高：100%；
不透明度：0；
z指数：500；
背景：rgba（0,0,0,0.6）；
指针事件：无；
-webkit转换：所有0.3s线性；
-moz过渡：所有0.3s线性；
-o-过渡：所有0.3s线性；
-ms转换：所有0.3s线性；
过渡：所有0.3s线性；
}
.hs叠加跨度{
显示：块；
填充：20px；
位置：绝对位置；
宽度：293px；
左：20px；
顶部：200px；
颜色：#fff；
-moz框大小：边框框；
-webkit框大小：边框框；
框大小：边框框；
字号：38px；
边框样式：无；
文本对齐：居中；
指针事件：无；
-webkit触摸标注：无；
-webkit用户选择：无；
-khtml用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
用户选择：无；
}
.hs包装器：悬停.hs覆盖{
不透明度：1；
}
@-webkit关键帧showMe{
0%{可见性：可见；z索引：100；}
12.5%{可见性：可见；z指数：100；}
25%{可见性：隐藏；z索引：0；}
100%{可见性：隐藏；z索引：0；}
}
@-moz关键帧向我展示{
0%{可见性：可见；z索引：100；}
12.5%{可见性：可见；z指数：100；}
25%{可见性：隐藏；z索引：0；}
100%{可见性：隐藏；z索引：0；}
}
@-o-关键帧向我展示{
0%{可见性：可见；z索引：100；}
12.5%{可见性：可见；z指数：100；}
25%{可见性：隐藏；z索引：0；}
100%{可见性：隐藏；z索引：0；}
}
@-ms关键帧向我展示{
0%{可见性：可见；z索引：100；}
12.5%{可见性：可见；z指数：100；}
25%{可见性：隐藏；z索引：0；}
100%{可见性：隐藏；z索引：0；}
}
@关键帧向我展示{
0%{可见性：可见；z索引：100；}
12.5%{可见性：可见；z指数：100；}
25%{可见性：隐藏；z索引：0；}
100%{可见性：隐藏；z索引：0；}
}

HTML

那么这是可能的，还是我在CSS和HTML的限制下做得太过分了？我能想到的唯一一件事就是使用mouseout事件，我看到的最接近的例子是这个人：

---

然而，我不知道我的代码将如何工作。有什么想法吗？感谢您的帮助。谢谢。

要更改图像背景吗？您可以更改DOM元素BG，但根据小提琴，图像占据了所有空间，背景无法显示。啊，好问题，很抱歉造成混淆。如果有意义的话，我想改变img标签后面的背景，而不是图像标签本身。我已经更新了JSFIDLE以反映这一点。现在，您应该可以在所有的背景后面看到一个绿色的几何背景

<style>


   .hs-wrapper{
    width: 1015px;
    height: 408px;
    position: relative;
    margin: 0 auto;
    overflow: hidden;
  background:url("http://www.planwallpaper.com/static/images/colorful-triangles-background_yB0qTG6.jpg");
}
.hs-wrapper img{
    top: 0px;
    left: 0px;
    position: absolute;
    -webkit-animation: showMe 0.8s linear infinite 0s forwards;
    -moz-animation: showMe 0.8s linear infinite 0s forwards;
    -o-animation: showMe 0.8s linear infinite 0s forwards;
    -ms-animation: showMe 0.8s linear infinite 0s forwards;
    animation: showMe 0.8s linear infinite 0s forwards;
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
    -ms-animation-play-state: paused;
    animation-play-state: paused;
}
.hs-wrapper img:nth-child(1){
    z-index: 9;
}
.hs-wrapper img:nth-child(2){
    -webkit-animation-delay: 0.1s;
    -moz-animation-delay: 0.1s;
    -o-animation-delay: 0.1s;
    -ms-animation-delay: 0.1s;
    animation-delay: 0.1s;
    z-index: 8;
}
.hs-wrapper img:nth-child(3){
    -webkit-animation-delay: 0.2s;
    -moz-animation-delay: 0.2s;
    -o-animation-delay: 0.2s;
    -ms-animation-delay: 0.2s;
    animation-delay: 0.2s;
    z-index: 7;
}
.hs-wrapper img:nth-child(4){
    -webkit-animation-delay: 0.3s;
    -moz-animation-delay: 0.3s;
    -o-animation-delay: 0.3s;
    -ms-animation-delay: 0.3s;
    animation-delay: 0.3s;
    z-index: 6;
}
.hs-wrapper img:nth-child(5){
    -webkit-animation-delay: 0.4s;
    -moz-animation-delay: 0.4s;
    -o-animation-delay: 0.4s;
    -ms-animation-delay: 0.4s;
    animation-delay: 0.4s;
    z-index: 5;
}
.hs-wrapper img:nth-child(6){
    -webkit-animation-delay: 0.5s;
    -moz-animation-delay: 0.5s;
    -o-animation-delay: 0.5s;
    -ms-animation-delay: 0.5s;
    animation-delay: 0.5s;
    z-index: 4;
}
.hs-wrapper img:nth-child(7){
    -webkit-animation-delay: 0.6s;
    -moz-animation-delay: 0.6s;
    -o-animation-delay: 0.6s;
    -ms-nimation-delay: 0.6s;
    animation-delay: 0.6s;
    z-index: 3;
}
.hs-wrapper img:nth-child(8){
    -webkit-animation-delay: 0.7s;
    -moz-animation-delay: 0.7s;
    -o-animation-delay: 0.7s;
    -ms-animation-delay: 0.7s;
    animation-delay: 0.7s;
    z-index: 2;
}
.hs-wrapper:hover img{
    -webkit-animation-play-state: running;
    -moz-animation-play-state: running;
    -o-animation-play-state: running;
    -ms-animation-play-state: running;
    animation-play-state: running;
}
.hs-overlay{
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 500;
    background: rgba(0,0,0,0.6);
    pointer-events: none;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    transition: all 0.3s linear;
}
.hs-overlay span{
    display: block;
    padding: 20px;
    position: absolute;
    width: 293px;
    left: 20px;
    top: 200px;
    color: #fff;
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box;
    font-size: 38px;
    border-style: none;
    text-align: center;
    pointer-events: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.hs-wrapper:hover .hs-overlay{
    opacity: 1;
}

@-webkit-keyframes showMe {
    0% { visibility: visible; z-index: 100; }
    12.5% { visibility: visible; z-index: 100; }
    25% { visibility: hidden; z-index: 0; }
    100% { visibility: hidden; z-index: 0; }
}

@-moz-keyframes showMe {
    0% { visibility: visible; z-index: 100; }
    12.5% { visibility: visible; z-index: 100; }
    25% { visibility: hidden; z-index: 0; }
    100% { visibility: hidden; z-index: 0; }
}

@-o-keyframes showMe {
    0% { visibility: visible; z-index: 100; }
    12.5% { visibility: visible; z-index: 100; }
    25% { visibility: hidden; z-index: 0; }
    100% { visibility: hidden; z-index: 0; }
}

@-ms-keyframes showMe {
    0% { visibility: visible; z-index: 100; }
    12.5% { visibility: visible; z-index: 100; }
    25% { visibility: hidden; z-index: 0; }
    100% { visibility: hidden; z-index: 0; }
}

@keyframes showMe {
    0% { visibility: visible; z-index: 100; }
    12.5% { visibility: visible; z-index: 100; }
    25% { visibility: hidden; z-index: 0; }
    100% { visibility: hidden; z-index: 0; }
}
</style>

<section>
                <div class="hs-wrapper">
                    <img src="http://farm2.staticflickr.com/1545/24610044154_20e82d4a01_o.jpg" alt="image01"/>
                    <img src="http://farm2.staticflickr.com/1677/25122429402_4983eefbd0_o.jpg" alt="image02"/>
                    <img src="http://farm2.staticflickr.com/1542/25240704165_73c03f1eff_o.jpg" alt="image03"/>
                    <img src="http://farm2.staticflickr.com/1447/24945094160_3c865f817b_o.jpg" alt="image04"/>
                    <img src="http://farm2.staticflickr.com/1545/24610044154_20e82d4a01_o.jpg" alt="image05"/>
                    <img src="http://farm2.staticflickr.com/1677/24610044594_f68cdd605c_o.jpg" alt="image06"/>
                    <img src="http://farm2.staticflickr.com/1693/24613897373_787d53a216_o.jpg" alt="image07"/>
                    <img src="http://farm2.staticflickr.com/1478/25147517251_68206c1e74_o.jpg" alt="image08"/>

                </div>
            </section>