How do you affect multiple child divs when hovering on the parent - css

Question

I am trying to implement some CSS on my website that I am having a little bit of difficulty with. I currently have five 'balls' (which are just circular divs) that have staggered heights. I have been experimenting with having the balls move around when you hover on them, which is great, but currently they only continue to move as long as you keep your pointer trained on it as it moves.
Ideally, I would like to have all five move independently when you hover in the general area. I have enclosed them in a wrapper div, but I am unsure of the code to affect the child divs when you hover on the parent. I am also not sure if I'm using the terms parent and child correctly, as I've only come across this concept in the last 20 minutes!
Here is the 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 -->
Here is the CSS as it currently stands:
#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;
}
The very last bit of code is my attempts to make ball2 'bounce' when hovering on the 'bounce' div. At the moment it doesn't work, but I'm sure syntactically it is all wrong. Any advice would be much appreciated!

Answer 1

Write your CSS so it affects the balls inside a hovered div:
#bounce:hover .ball {
...
}
Or, if you need different CSS for each ball:
#bounce:hover #ball1 {
...
}
#bounce:hover #ball2 {
...
}
...

Answer 2

Give the hover a 100% width/ height
#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

Ideally, I would like to have all five move independently when you
hover in the general area...
So do something like this:
#demoStrip:hover #bounce .ball:nth-child(1) {
//animation here
}
This should fix your second issue of...
currently they only continue to move as long as you keep your pointer
trained on it as it moves
If you still run into that issue then set them both to position: relative and set each element's z-index, but be sure to set the .ball to a higher z-index. See Submenu does not stay open for more on why.

Answer 4

Your last attempt wasn't too far off, but instead of
#bounce:hover ~ #ball2:hover {...}
use
#bounce:hover #ball2 {...}
this will
make ball2 'bounce' when hovering on the 'bounce' div
You do not need the second :hover on #ball2, nor do you need the tilde (~).
In CSS the tilde (~) symbol is the 'general sibling' combinator. See this article for a great intro to CSS selectors/combinators http://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048
You could use the tilde to hover #ball1 and animate #ball2 (providing #ball2 is after #ball1 in the DOM) like so:
#ball1:hover ~ #ball2 {
margin-top: 65px;
transition: margin-top 3s;
}