如何當鼠標懸停在某個單一的div

Question

我要尋找一個懸停效果暫停動畫觸發多個DIV elments .....

我創建尺寸400×400的單格和該div，我有內添加四個尺寸爲150x150的圖片，並給出每個尺寸爲150x150的單個div .....

這樣就可以在一個div中創建四個不同的div元素....！

現在我已經使用css3動畫和上面的圖片-webkit框架來旋轉四個圖像.. 現在我想暫停這個動畫時，因爲我可以給每個圖像時，徘徊泡沫消息。 ..

如果我給懸停暫停到DIV1，DIV2，DIV3，seperatly DIV4當我只徘徊在特定圖像被暫停，其他三幅圖像繼續旋轉，看起來彆扭，看動畫..

如果我使用暫停盤旋到外部div內部div不受影響，動畫仍然繼續...

我只需要所有四個圖像的動畫停止時，我徘徊在一個單一的形象，並繼續其旋轉後，答案......

這裏是我使用的代碼....

`/ * CSS */ .div1 { 寬度：170像素; height：170px; 位置：相對; 動畫：myfirst 5s無限; 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; 
         } 
       } 

Answer 1

你可以這樣做，是在另一個元素不同elments得到新的CSS值，如果你懸停父元素：

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

赤此fiddle

編輯

對此案件的評論之後的解除：

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

FIDDLE