圖標翻轉懸停

Question

我想翻轉懸停圖標像this例子。我將代碼複製並粘貼到我的pen中，並替換了自己的ID，但它不起作用。出了什麼問題？提前致謝！

a #logo-img{ 
    margin: 3px 20px; 
    -webkit-transition: 0.6s ease-out; 
    -moz-transition: 0.6s ease-out; 
    transition: 0.6s ease-out; 
    } 

    &:hover { 
    a #logo-img{ 
     -webkit-transform: rotateZ(720deg); 
     -moz-transform: rotateZ(720deg); 
     transform: rotateZ(720deg); 
    } 
    } 

Answer 1

您的CSS語法已關閉;這就像你想寫SCSS或什麼的。修改爲

a #logo-img{ 
    margin: 3px 20px; 
    -webkit-transition: 0.6s ease-out; 
    -moz-transition: 0.6s ease-out; 
    transition: 0.6s ease-out; 
} 

a #logo-img:hover { 
    -webkit-transform: rotateZ(720deg); 
    -moz-transform: rotateZ(720deg); 
    transform: rotateZ(720deg); 
} 

它會工作。