当您将鼠标悬停在父级上时，如何影响多个子div

Question

我试图在我的网站上实现一些CSS，我有点困难。 我目前有五个'球'（只是圆形的div），它们交错高度。 当你将它们悬停在它们身上时，我一直在尝试让球移动，这很棒，但是目前它们只有在你移动时保持指针训练时才会继续移动。

理想情况下，当您将鼠标悬停在一般区域时，我希望所有五个独立移动。 我已将它们包含在包装器div中，但是当您将鼠标悬停在父级上时，我不确定影响子div的代码。 我也不确定我是否正确使用父母和孩子这两个词，因为我在过去20分钟内只遇到过这个概念！

这是HTML：

<div id='demoStrip'><div id='ballWrapper'>
    <div id='bounce'>
        <div class='ball' id='ball1'><p>Professional</p></div>
        <div class='ball' id='ball2'><p>Copy</p></div>
        <div class='ball' id='ball3'><p>Just</p></div>
        <div class='ball' id='ball4'><p>For</p></div>
        <div class='ball' id='ball5'><p>You</p></div>
    </div>
</div></div> <!-- End of demoStrip div -->  

这是目前的CSS：

#demoStrip {
width: 960px;
height: 410px;
margin: 20px auto 0 auto;
/*background: #00cccc;*/
border-radius: 20px;

}

#ballWrapper {
width: 900px;
height: 410px;
margin: 0 auto 0 auto;
}

.ball {
margin: 0 20px 0 20px;
/*width: 150px;
height: 150px;*/
border-radius: 200px;
background-image: radial-gradient(circle closest-corner at center, #FFFF99 0%, #FFFF00 100%);
float: left;
box-shadow: 5px 5px 5px #333333;

}

.ball p {
text-align: center;
text-transform: uppercase;
font-family: sans-serif;
margin: 0;
}


#ball1 {
width: 150px;
height: 150px;
margin-top: 245px;  
}

#ball2 {
width: 140px;
height: 140px;
margin-top: 185px;
}

#ball3 {
width: 130px;
height: 130px;
margin-top: 125px;
}

#ball4 {
width: 120px;
height: 120px;
margin-top: 65px;
}

#ball5 {
width: 110px;
height: 110px;
margin-top: 5px;
}

#ball1:hover {
margin-top: 5px;
transition: margin-top 3s;  
}

#bounce:hover ~ #ball2:hover {
margin-top: 65px;
transition: margin-top 3s;
}

最后一点代码是我在悬停在'bounce'div上时试图让ball2'反弹'。 目前它不起作用，但我确信在语法上它是完全错误的。 任何建议将不胜感激！

Answer 1

写你的CSS，这会影响悬停div内的球：

#bounce:hover .ball {
    ...
}

或者，如果每个球需要不同的CSS：

#bounce:hover #ball1 {
    ...
}
#bounce:hover #ball2 {
    ...
}
...

Answer 2

将悬停的宽度/高度设为100％

#ball1:hover {
width:100%;
height:100%
margin-top: 5px;
transition: margin-top 3s;  
}

#bounce:hover ~ #ball2:hover {
margin-top: 65px;
transition: margin-top 3s;
width:100%;
height:100%

}

Answer 3

理想情况下，当你 在一般区域盘旋 时，我想让所有五个独立移动 ......

所以做这样的事情：

#demoStrip:hover #bounce .ball:nth-child(1) {
  //animation here
}

这应该修复你的第二期......

目前他们只有继续移动，只要你在移动时保持指针 训练

如果你仍然遇到这个问题，那么将它们设置为position: relative并设置每个元素的z-index ，但一定要将.ball设置为更高的z-index 。 有关原因，请参阅子菜单不会保持打开状态 。

Answer 4

你的最后一次尝试不是太远，而是

#bounce:hover ~ #ball2:hover {...}

采用

#bounce:hover #ball2 {...}

这将

当盘旋在'反弹'div上时，让ball2'反弹'

你不需要第二个：悬停在＃ball2上 ，你也不需要波浪号（〜）。 在CSS中，波浪号（〜）符号是“通用兄弟”组合符。 有关CSS选择器/组合器的精彩介绍，请参阅此文章http://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048

您可以使用波浪线悬停#ball1和动画#ball2（提供#ball2在DOM中的＃ball1之后），如下所示：

#ball1:hover ~ #ball2 {
    margin-top: 65px;
    transition: margin-top 3s;
}