I encountered an issue while trying to add hover functionality to pause my pure CSS slider. Initially, I had the pausing feature working but then I wanted to include a div displaying that it is paused. However, I realized that one element cannot trigger another element located before it. To address this, I placed the "pause display div" and the images inside a "slider_cover" div so that elements coming after could be triggered. Although I am now able to activate the "pause display div," the images in the div instantly follow the "pause display div." I'm looking for guidance on which selectors to use to trigger both divs—one to display itself and the other to set "animation-play-state: paused;"
Below is the code I am currently using:
HTML:
<div id="slider_cover"></div>
<div id="pause" class="pause">
<p>Paused</p>
</div>
<div id="slider_bg">
<div class="picslider">
<img id="pic1" class="slide pause" src="./Pictures/pic1.png"></img>
<img id="pic2" class="slide pause" src="./Pictures/pic2.png"></img>
<img id="pic3" class="slide pause" src="./Pictures/pic3.png"></img>
<div id="progress" class="pause"> </div>
</div>
</div>
CSS:
#pause p {
position: relative;
font-size: 32pt;
font-weight: bold;
margin-top: 25px;
text-align: center;
color: white;
}
#slider_cover {
position: absolute;
top: 135px;
left: 250px;
opacity: 0;
width: 750px;
height: 550px;
z-index: 12;
}
#slider_cover:hover + #pause{
max-height: 100px;
}
#slider_cover:hover img:nth-of-type(1) {
animation-play-state: paused;
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
-o-animation-play-state: paused;
}
Please refrain from providing answers outside of CSS/HTML solutions. Thank you for your assistance!