how to trigger multiple div elments when hovered over a single div

Problem

i am looking for a hovering effect to pause an animation.....

i have created a single div of size 400x400 and within that div i have added four images of size 150x150 each and given each of them a single div of size 150x150.....

so that makes four different div elements in a single div....!

now i have made the four images to rotate using css3 animation and -webkit frames like the image above.. now i want to pause this animation when hovered so that i can give a bubble message to each image when hovered...

if i give hover pause to div1,div2,div3,div4 seperatly and when i hovered only the particular image gets paused and the other three images continue its rotation and looks awkward to see the animation..

And if i use the pause hover to the external div the internal div does not get affected and the animation still continues....

i just need the animation of all the four images to be stopped when i hovered over a single image and continue its rotation after unhovering.....

i am new to css and so respect all ur help and answers......

here is the code i used....

`/* css*/ .div1 { width:170px; height:170px; position:relative; animation:myfirst 5s infinite; animation-direction:alternate;

                    -webkit-animation:myfirst 5s infinite;
                    -webkit-animation-direction:alternate;
                    -moz-animation:myfirst 5s infinite;
                    -moz-animation-direction:alternate;
                    -o-animation:myfirst 5s infinite;
                    -o-animation-direction:alternate;
                    -ms-animation:myfirst 5s infinite;
                    -ms-animation-direction:alternate;
                }


    @keyframes myfirst
                {
                    0%   { left:0px; top:0px;}
                    25%  { left:150px; top:0px;}
                    50%  { left:150px; top:150px;}
                    75%  { left:0px; top:150px;}
                    100% { left:0px; top:0px;}
                }
@-webkit-keyframes myfirst  /* Safari and Chrome */
                {
                    0%   
                        { 
                            left:0px; 
                            top:0px;
                        }
                    25%  
                        { 
                            left:170px; 
                            top:0px;
                        }
                    50%  
                        { 
                            left:170px; 
                            top:170px;
                        }
                    75%  
                        { 
                            left:0px; 
                            top:170px;
                        }
                    100% 
                        { 
                            left:0px; 
                            top:0px;
                        }
                }

            .div2
                {
                    width:170px;
                    height:170px;
                    position:relative;
                    animation:myfourth 5s infinite;
                    animation-direction:alternate;

                    -webkit-animation:myfourth 5s infinite;
                    -webkit-animation-direction:alternate;
                    -moz-animation:myfourth 5s infinite;
                    -moz-animation-direction:alternate;
                    -o-animation:myfourth 5s infinite;
                    -o-animation-direction:alternate;
                    -ms-animation:myfourth 5s infinite;
                    -ms-animation-direction:alternate;
                }
    @keyframes myfourth
                {
                    0%   { left:0px; top:150px;}
                    25%  { left:0px; top:0px;}
                    50%  { left:150px; top:0px;}
                    75%  { left:150px; top:150px;}
                    100% { left:0px; top:150px;}
                }

    @-webkit-keyframes myfourth  /* Safari and Chrome */
                {
                    0%   
                        { 
                            left:0px; 
                            top:170px;
                        }
                    25%  
                        { 
                            left:0px; 
                            top:0px;
                        }
                    50%  
                        { 
                            left:170px; 
                            top:0px;
                        }
                    75%  
                        { 
                            left:170px; 
                            top:170px;
                        }
                    100% 
                        { 
                            left:0px; 
                            top:170px;
                        }
                }

            .div3
                {
                    width:170px;
                    height:170px;
                    position:relative;
                    animation:mysecond 5s infinite;
                    animation-direction:alternate;

                    -webkit-animation:mysecond 5s infinite;
                    -webkit-animation-direction:alternate;
                    -moz-animation:mysecond 5s infinite;
                    -moz-animation-direction:alternate;
                    -o-animation:mysecond 5s infinite;
                    -o-animation-direction:alternate;
                    -ms-animation:mysecond 5s infinite;
                    -ms-animation-direction:alternate;
                }


    @keyframes mysecond
                {
                    0%   { left:150px; top:0px;}
                    25%  { left:150px; top:150px;}
                    50%  { left:0px; top:150px;}
                    75%  { left:0px; top:0px;}
                    100% { left:150px; top:0px;}
                }
@-webkit-keyframes mysecond  /* Safari and Chrome */
                {
                    0%   
                        { 
                            left:170px; 
                            top:0px;
                        }
                    25%  
                        { 
                            left:170px; 
                            top:170px;
                        }
                    50%  
                        { 
                            left:0px; 
                            top:170px;
                        }
                    75%  
                        { 
                            left:0px; 
                            top:0px;
                        }
                    100% 
                        { 
                            left:170px; 
                            top:0px;
                        }
                }

            .div4
                {
                    width:170px;
                    height:170px;
                    position:relative;
                    animation:mythird 5s infinite;
                    animation-direction:alternate;

                    -webkit-animation:mythird 5s infinite;
                    -webkit-animation-direction:alternate;
                    -moz-animation:mythird 5s infinite;
                    -moz-animation-direction:alternate;
                    -o-animation:mythird 5s infinite;
                    -o-animation-direction:alternate;
                    -ms-animation:mythird 5s infinite;
                    -ms-animation-direction:alternate;
                }


    @keyframes mythird
                {
                    0%   { left:150px; top:150px;}
                    25%  { left:0px; top:150px;}
                    50%  { left:0px; top:0px;}
                    75%  { left:150px; top:0px;}
                    100% { left:150px; top:150px;}
                }
@-webkit-keyframes mythird  /* Safari and Chrome */
                {
                    0%   
                        { 
                            left:170px; 
                            top:170px;
                        }
                    25%  
                        { 
                            left:0px; 
                            top:170px;
                        }
                    50%  
                        { 
                            left:0px; 
                            top:0px;
                        }
                    75%  
                        { 
                            left:170px; 
                            top:0px;
                        }
                    100% 
                        { 
                            left:170px; 
                            top:170px;
                        }
                }
Problem courtesy of: shyam selvan

Solution

You can do, that different elments in another elements get new css values, if you hover the parent element:

#parent:hover div{
    background-color:red;
}

chek this fiddle

EDIT

Soultion after the comments for this case:

#parent:hover img{
    -webkit-animation-play-state:paused;
    -moz-animation-play-state:paused;
    -o-animation-play-state:paused; 
    animation-play-state:paused;
}

FIDDLE

Solution courtesy of: Michael Walter

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.