在另一個元素懸停時停止動畫

Question

懸停鼠標左鍵時我想停止。

這是我的代碼： https : //codepen.io/anon/pen/rpQoKz

我的幻燈片放映不止於我的最后一個樣式規則#container:has(#carousel-left:hover) > .photobanner

我已經讀過它可能不存在，並嘗試使用：has選擇器發布有關：has selector的信息 。 任何幫助表示贊賞。

Answer 1

您需要像這樣更改html

 <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div id="container">
   <a class="left carousel-control" id="carousel-left" href="#carousel-example-generic" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" id="carousel-right" href="#carousel-example-generic" role="button" data-slide="next">
         <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
         <span class="sr-only">Next</span>
    </a>
    <div class="photobanner">
        <img class="first-image active" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/13034/sticker.png" alt="" />
        <img src="https://designshack.net/tutorialexamples/photobanner/image-3.jpg" alt="" />
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/13034/sticker.png" alt="" />
        <img src="https://designshack.net/tutorialexamples/photobanner/image-3.jpg" alt="" />
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/13034/sticker.png" alt="" />
        <img src="https://designshack.net/tutorialexamples/photobanner/image-3.jpg" alt="" />
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/13034/sticker.png" alt="" />
        <img src="https://designshack.net/tutorialexamples/photobanner/image-3.jpg" alt="" />
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/13034/sticker.png" alt="" />
        <img src="https://designshack.net/tutorialexamples/photobanner/image-3.jpg" alt="" />
    </div>
</div>
  </div>

</div>

和CSS

#carousel-left:hover ~ .photobanner{
    animation-play-state: paused;
}