Question

我正在尝试将功能暂停到我的纯css滑块。有一次我让它暂停，但后来我想添加一个显示它暂停的div。在此过程中我注意到，一个元素无法操作另一个元素。因此，我将＆＃34;暂停显示div＆＃34;和图片放入＆＃34; slider_cover＆＃34; div为了让行动元素追随自己。我可以动作＆＃34;暂停显示div，＆＃34;但是现在在＆＃34;暂停显示div之后的div中的图片。＆＃34;我只需要知道如何/哪些选择器用于操作两个div，一个用于显示自身，另一个用于＆＃34;动画播放状态：暂停;＆＃34;

以下是我正在使用的代码：

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;
}

很抱歉提前获得了大量的CSS。请坚持CSS / HTML答案，并感谢您提前付出任何努力!!

Answer 1

<强> !!!解决!!!

我明白了。我移动了“slider_cover”的结束标记，以便它包含我希望采取行动的两个div。我之前尝试过这个，但是之前设置的“位置”标签阻止了它。一旦我相应地改变了位置，我使用“元素元素”选择器来操作我的div“暂停”，并使用“.pause”类（与两个独立的div相关）

以下是我的解决方案代码中与我之前的代码比较的重要部分：

<强> HTML：

<div id="slider_cover">
<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>
</div>

<强> CSS：

#slider_cover {
position: absolute;
top: 140px;
left: 250px;
background: orange;
width: 750px;
height: 550px;
z-index: 10;
}
#slider_cover:hover > #pause{
max-height: 100px;
}
#slider_cover:hover  .pause{
animation-play-state: paused;
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
-o-animation-play-state: paused;
}

在单独的div中定位动画/关键帧

1 个答案: