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

Posted 2023-03-06

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

【英文标题】：How to pause slides autoplay when you hover over in css?

【发布时间】：2021-10-18 15:53:06

【问题描述】：

我有两个问题正在尝试解决，但没有成功。

我正在尝试在动画中放置超过 5 张图片，以保持所有图片都在同一行中。 我试图让动画在我将鼠标悬停在图像上时停止，并在我悬停时恢复。

似乎在 css 中必须有一个简单的解决方案。我尝试了多种不同的动画播放状态：已暂停，但似乎没有任何效果。

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"   />
</li>
<li class="slide-image">
<img src="image2.jpg"   />
</li>
<li class="slide-image">
<img src="image3.jpg"   />
</li>
<li class="slide-image">
<img src="image4.jpg"   />
 </li>
    <li class="slide-image">
<img src="image5.jpg"   />
 </li>
        <li class="slide-image">
<img src="image6.jpg"   />
 </li>
</ul>
</div>
</article>
</section>

【问题讨论】：

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

嗨，非常感谢，它成功了！

【参考方案1】：

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