javascript - 在另一个元素悬停时停止动画

Question

我想在悬停左键时停止。

这是我的代码:https://codepen.io/anon/pen/rpQoKz

我的幻灯片不会停止在我最后的样式规则 #container:has(#carousel-left:hover) > .photobanner

我读过它可能不存在并尝试使用 :has 选择器 post about :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;
}