使用-webkit-animation-play-state暫停CSS幻燈片：已暫停;不工作

Question

我有以下代碼：

 .picTransition .item { 
    position: absolute; 
    left: 0; 
    right: 0; 
    opacity: 0; 
    -webkit-animation: picTransition 56s linear infinite; 
    -moz-animation: picTransition 56s linear infinite; 
    -ms-animation: picTransition 56s linear infinite; 
    animation: picTransition 56s linear infinite; 
} 

.picTransition.paused{ 
    -webkit-animation-play-state:paused; 
    -moz-animation-play-state:paused; 
    -o-animation-play-state:paused; 
    animation-play-state:paused; 
} 

.picTransition .item:nth-child(2) { 
    -webkit-animation-delay: 14s; 
    -moz-animation-delay: 14s; 
    -ms-animation-delay: 14s; 
    animation-delay: 14s; 
} 
.picTransition .item:nth-child(3) { 
    -webkit-animation-delay: 28s; 
    -moz-animation-delay: 28s; 
    -ms-animation-delay: 28s; 
    animation-delay: 28s; 
} 
.picTransition .item:nth-child(4) { 
    -webkit-animation-delay: 42s; 
    -moz-animation-delay: 42s; 
    -ms-animation-delay: 42s; 
    animation-delay: 42s; 
} 

我作出的一個錯誤如何暫停幻燈片。我使用了動畫播放狀態：已暫停，但不起作用。我可以使用jquery函數，但我真的很想嘗試讓它在css中工作。我是否搞砸了父母的孩子關係？或者這個時序不被支持或者暫停問題搞亂了？也許我需要做一個懸停類型暫停併爲此創建一個新的div？我知道我犯了一個簡單的錯誤。

Answer 1

它看起來像你說用類.picTransition & .paused任何元素應該暫停動畫，但沒有JavaScript代碼要麼是所有的時間，因爲你已經設置類默認或從未因爲它不」沒有那個班。

如果您希望在事件中使用JavaScript來添加/刪除類，或者如果它是簡單的懸停事件，請將.picTransition.paused更改爲.picTransition:hover。

如果.paused是.picTransition的子元素，請確保選擇器中兩者之間有空格。

如果沒有一個是正確的，你可能會創建一個jsFiddle供我們查看嗎？