Question

我的CSS选框有问题，图像从右向左移动。现在，当我将鼠标悬停在＆＃34; SPAN＆＃34;，空白区域或图像内的任何位置时，动画暂停。我希望动画在悬停时暂停，只有当悬停在图像上时;当悬停在＆＃34; SPAN＆＃34;。

内的空白区域时，动画应该正常运行

这是我的代码：

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);
    }
}

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;
}

Answer 2

这个安静简单的改变

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

到此

gatttool -b <68:C9:0B:06:46:85> --interactive
[68:C9:0B:06:46:85][LE]> char-read-uuid F000AA01-0451-4000-B000-000000000000
handle: 0x0021   value: 00 00 00 00 //this is the result you want

暂停图像悬停而不是空区域 - HTML，CSS

2 个答案: