图片悬停时暂停，而不是在空白区域悬停 - HTML，CSS

Question

我在使用CSS跑马灯时遇到了问题，其中图像从右向左移动。 目前当我在“SPAN”内任何位置悬停，无论是空白区域还是图像，动画都会暂停。 我希望在悬停时仅在图像上悬停才会暂停动画；当在“SPAN”内悬停在空白区域时，动画应正常运行。

这是我的代码：

HTML：

<div class="marqueecontainer">
    <div class="marquee">
        <span>
            <img src="images/upcoming01.png" alt="" />
            <img src="images/upcoming02.png" alt="" />
        </span>
    </div>
</div>

CSS（层叠样式表）：

.marqueecontainer {
    overflow: auto;
}

.marquee {
    padding: 5px;
    margin: 0 auto;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
}

    .marquee span {
        display: inline-block;
        padding-left: 50%;
        animation: marquee 40s linear infinite;
    }

        .marquee span:hover {
            animation-play-state: paused;
        }

@keyframes marquee {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(-100%, 0);
    }
}

- Jawad Shafiq

Answer 1

尝试为每个图像添加类，例如：

<img class="pauseAnimation" src="images/upcoming01.png" alt="" />
<img class="pauseAnimation" src="images/upcoming02.png" alt="" />

然后修改CSS

.pauseAnimation:hover {
   -webkit-animation-play-state: paused; /* Cross Browser Compatability */
   -moz-animation-play-state: paused; /* Cross Browser Compatability */
   -o-animation-play-state: paused; /* Cross Browser Compatability */
   animation-play-state: paused;
}

- Timble

---

好的。谢谢Timble，现在它按照我的要求工作了。非常感谢你的帮助！我很感激！ - Jawad Shafiq

很高兴能帮到你，也很高兴它起作用了 :) 如果可以的话，请接受并给予赞同，因为它解决了问题，我会非常感激。无论如何，祝你有个愉快的一天，欢迎来到Stack Overflow！ - Timble

Answer 2

这很简单，改变它就行了

.marquee span:hover {
    animation-play-state: paused
    }

转为：

.marquee image:hover {
animation-play-state: paused
}

- Jeyenth

---

嗨Jeyentharaan，感谢您的回答，但这并没有起作用。现在，当悬停在任何东西上时，跑马灯不会暂停.....我也尝试过这个，但也不起作用： .marquee img:hover { animation-play-state: paused } - Jawad Shafiq