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

【问题标题】：Targetting animation/keyframes inside seperate divs在单独的 div 中定位动画/关键帧
【发布时间】：2014-06-04 20:50:47
【问题描述】：

我正在尝试悬停以暂停纯 CSS 滑块的功能。有一次我让它暂停了，但后来我想添加一个显示它已暂停的 div。在此过程中引起我的注意，一个元素不能作用于它之前的另一个元素。因此，我将“暂停显示 div”和图片放入“slider_cover”div 中，以便动作元素紧随其后。我可以操作“暂停显示 div”，但现在 div 中的图片紧跟在“暂停显示 div”之后。我只需要知道如何/使用哪些选择器来操作两个 div，一个用于显示自身，另一个用于“动画播放状态：暂停；”

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

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 答案，并提前感谢您的任何努力！

【问题讨论】：

您能否将解决方案移到下面的答案中？这样，您的问题就可以被标记为已回答。谢谢！
对不起，我会的。它不允许我在提出问题后这么快就发布我的解决方案作为答案。它要我等8个小时，我不打算回到这个问题。很高兴有人至少看到了这个！
@Cody 您可以通过单击旁边的复选标记将您的答案标记为已接受。

标签： html css css-selectors css-animations

【解决方案1】：

！！！已解决！！！

我想通了。我移动了“slider_cover”的结束标签，这样它就可以包含我想要操作的两个 div。我之前尝试过这个，但被之前设置的“位置”标签阻止了。一旦我相应地改变了位置，我就使用“元素元素”选择器来操作我的 div“pause”和类“.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;
}

【讨论】：