Question

我正在尝试在我的网站上实现一些CSS，我遇到了一些困难。我现在有五个球＆＃39; （这只是圆形的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;
}

最后一点代码是我试图让ball2＆＃39;反弹＆＃39;当徘徊在＆＃39;反弹＆＃39; DIV。目前它不起作用，但我确信在语法上它是完全错误的。任何建议将不胜感激！

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 1}}。有关原因的详情，请参阅Submenu does not stay open。

Answer 4

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

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

使用

#bounce:hover #ball2 {...}

这将

让ball2＆＃39;反弹＆＃39;当徘徊在＆＃39;反弹＆＃39;格

＃ball2 上不需要第二个：hover ，也不需要代字号（〜）。在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;
}

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

4 个答案: