图标在悬停时翻转

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);
}

它会起作用。