Множественный эффект наведения

Question

Я новичок. Я хочу навести курсор на бутылку и повернуть бутылку. В то же время я хочу показать льющуюся и лужущую анимацию. Я не знаю, как я могу получить несколько анимаций, чтобы начать с одного зависания. Вот CSS для этого:

/*CSS ANIMATION*/ 

@-webkit-keyframes bottle { 
0% { 
    height: 67px; 
} 
7% { 
    height: 67px; 
} 
95% { 
    height: 0px; 
} 
100% { 
    height: 0; 
} 
} 


@-moz-keyframes bottle { 
0% { 
    height: 67px; 
} 
7% { 
    height: 67px; 
} 
95% { 
    height: 0px; 
} 
100% { 
    height: 0; 
} 
} 

#bottle { 
position: absolute; 
top: 1055px; 
right: 490px; 
-webkit-transition: all .2s linear; 
} 

#bottle:hover { 
-moz-transform: rotate(165deg); 
-webkit-transform: rotate(165deg); 
transform: rotate(165deg); 
-webkit-transition: all .2s linear; 
} 

@-webkit-keyframes pour { 
0% { 
    background-position: 0 0; 
    height: 0; 
} 
5% { 
    background-position: 0 0; 
    height: 0; 
} 
10% { 
    background-position: 0 0; 
    height: 75px; 
    width: 4px; 
} 
95% { 
    background-position: 0 0; 
    height: 120px; 
    width: 4px; 
} 
100% { 
    background-position: 0 0; 
    height: 170px; 
    width: 4px; 
} 
} 

@-webkit-keyframes puddle { 
10% { 
    height: 30px; 
} 
15% { 
    height: 30px; 
} 
98% { 
    height: 50px; 
} 
100% { 
    height: 0; 
} 
} 

#pour { 
position: relative; 
right: -55px; 
top: -25px; 

} 

#puddle { 
position: relative; 
top: -50px; 
opacity: 1; 
right: -20px; 
} 

#contents1:hover { 
-moz-animation: bottle 5s linear 1 forwards; 
-webkit-animation: bottle 5s linear 1 forwards; 
animation: bottle 5s linear 1 forwards; 
} 

#contents2:hover { 
display: block; 
-moz-animation: pour 2s linear 1; 
-webkit-animation: pour 2s linear 1; 
animation: pour 2s linear 1; 
} 

#contents3:hover { 
-moz-animation: puddle 10s linear 1; 
-webkit-animation: puddle 10s linear 1; 
animation: puddle 10s linear 1; 
} 

Теперь мне нужно знать, как подключить contents2:hover и contents3:hover с bottle:hover. Я имею в виду, только нависая над бутылкой, как я могу установить содержимое2 и содержимое3 в движение?

Как вы, ребята просили я ве закачанный все, чтобы JSFiddle .. Это ссылка http://jsfiddle.net/shettyrahul8june/8tkKK/2/

И для полноэкранного jsfiddle.net/shettyrahul8june/8tkKK/2/embedded/result/

По некоторым причинам флажок.png не отображается в ссылке редакторов, но отлично работает в полноэкранном режиме. Это ссылка для изображения s26.postimg.org/s07bc6gvp/bottle.png .... Все, что я хочу, - это чтобы бутылка вращалась и вылейте жидкость, а затем приступим к луже. Все должно случиться с одним зависанием бутылки .. Я не просто полагаюсь на людей. Я много работал, но не мог понять. Также, если кто-то может поставить свет о том, как поддерживать ресо Надеемся, что это будет очень полезно. Надеюсь, что я точно ... Пожалуйста, помогите, потому что многие ищут это, и это может быть их конечной остановкой.

Answer 1

Вы ищете Tilde ~ селектор в CSS

Working Demo и Source

CSS

#bottle:hover ~ #pour { 
    display: block; 
    -moz-animation: pour 2s linear 1; 
    -webkit-animation: pour 2s linear 1; 
    animation: pour 2s linear 1; 
} 
#bottle:hover ~ #puddle { 
    -moz-animation: puddle 10s linear 1; 
    -webkit-animation: puddle 10s linear 1; 
    animation: puddle 10s linear 1; 
}