如何在将鼠标悬停在 css 上时暂停幻灯片自动播放？

Question

我有两个问题想解决，但没有成功。

我试图在动画中放置五张以上的图像，使它们都在同一行中。
我试图让动画在我悬停在图像上时停止，并在我悬停时恢复。

看来css中一定有一个简单的解决办法。我已经尝试了 animation-play-state: paused 的多种变体，但似乎没有任何效果。

CSS

@charset "UTF-8";
#heading {
    margin-left: 0em;
}
#heading h1 {
    margin-top: -4em;}
#icon {
    margin-left: 50em;
}
#group2 {
    margin-left: 14em;
}
#group3 {
    margin-top: 2.5em;
    margin-left: 25em;
}
#group2 {
}

@media (min-width:768px) and (max-width:1096px){
#heading h1 {
}
#heading h1 {
}
}

@media (max-width:414px){
}

@media (orientation:landscape) and (min-width:415px) and (max-width:767px){
.relative h2 {
    float: left;
}
}
.body-all {
 max-width: 960px;
  padding-top: 5em;
  margin: auto;
}
#tabs-1, #tabs-2, #tabs-3, #tabs-4, #tabs-5{ 
    display:none;
}    
.slideshow-wrapper {
                width:704px;
                overflow:hidden;
                margin: 0 auto;
            }
            .slideshow-wrapper ul {
                margin:0;
                padding:0;
                width: 4800px;
                -webkit-animation: slideshow 12s infinite;
                -moz-animation: slideshow 12s infinite;
                -o-animation: slideshow 12s infinite;
                animation: slideshow 12s infinite;
            }
            .slides .slide-image {
                width:700px;
                display:inline-block;
                margin:0;
                padding:0;
            }
            .slides .slide-image img {
                width: 100%;
            }
/* Helper classes */

            .text-center {
                text-align: center;
            }
            .transition-all {
                -webkit-transition: all 1s;
                -moz-transition: all 1s;
                -o-transition: all 1s;
                transition: all 1s;
            }

            /* Animation */
            @-webkit-keyframes slideshow {
              0%    { margin-left: 0.5%;            }
              25%   { margin-left: -100%;   }
              50%   { margin-left: -200%;   }
              75%   { margin-left: -300%; }
              100%  { margin-left: -400%; }
            }
            @-moz-keyframes slideshow {
              0%    { margin-left: 0.5%;            }
              25%   { margin-left: -100%;   }
              50%   { margin-left: -200%;   }
              75%   { margin-left: -300%; }
                100%    { margin-left: -400%; }
            }
            @-o-keyframes slideshow {
              0%    { margin-left: 0.5%;            }
              25%   { margin-left: -100%;   }
              50%   { margin-left: -200%;   }
              75%   { margin-left: -300%; }
                100%    { margin-left: -400%; }
            }

            @keyframes slideshow {
              0%    { margin-left: 0.5%;            }
              25%   { margin-left: -100%;   }
              50%   { margin-left: -200%;   }
              75%   { margin-left: -300%; }
                100%    { margin-left: -400%; }
            }
            
            /* Media queries */
            @media only screen and (max-width:768px) {
                .slideshow-wrapper  { width:404px; }
                .slideshow-wrapper .slides .slide-image{ width:400px; }
                section { padding:0.5em; }
            }

            @media only screen and (max-width:400px) {
                .slideshow-wrapper  { width:304px; }
                .slideshow-wrapper .slides .slide-image { width:300px;}
            }

还有 HTML

</div>
      <h2 style="color:black;font-family: 'Avenir'; font-weight:280; font-size:18px; letter-spacing: 0.25px; line-height:1.2;">Artists Prototypes</h2>
 <div>
   <section class="bg-blue">
<article class="slideshow">
<div class="slideshow-wrapper">
<ul class="slides">
<li class="slide-image">
<img src="image1.jpg" width="auto" height="400" alt=""/>
</li>
<li class="slide-image">
<img src="image2.jpg" width="auto" height="400" alt=""/>
</li>
<li class="slide-image">
<img src="image3.jpg" width="auto" height="400" alt=""/>
</li>
<li class="slide-image">
<img src="image4.jpg" width="auto" height="400" alt=""/>
 </li>
    <li class="slide-image">
<img src="image5.jpg" width="auto" height="400" alt=""/>
 </li>
        <li class="slide-image">
<img src="image6.jpg" width="auto" height="400" alt=""/>
 </li>
</ul>
</div>
</article>
</section>

Answer 1

将 :hover 伪选择器添加到父元素，然后使用动画状态暂停它。图像在父级内部，因此它应该可以工作。尝试一次。

如何在将鼠标悬停在 css 上时暂停幻灯片自动播放？

How to pause slides autoplay when you hover over in css?

css

animation

hover

slideshow