Question

我想在悬停左键时停止。

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

我的幻灯片显示不会停留在我的上一个样式规则#container:has(#carousel-left:hover) > .photobanner

上

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

停止另一个元素上的动画悬停

1 个答案: