如何使用CSS悬停图标来旋转图标

我试图在鼠标悬停上旋转图标，但无法使其工作。我无法在互联网上找到解决方案。这是我到目前为止已经试过：如何使用CSS悬停图标来旋转图标

@import url('https://fonts.googleapis.com/icon?family=Material+Icons'); 
 

 
.material-icons:hover { 
 
\t -webkit-transform: rotate(180deg); 
 
\t -ms-transform: rotate(180deg); 
 
\t -o-transform: rotate(180deg); 
 
\t transform: rotate(180deg); 
 
} 
 
button.c-accordion { 
 
    background-color: #eee; 
 
    color: #444; 
 
    cursor: pointer; 
 
    padding: 5px; 
 
    width: 50%; 
 
    border: none; 
 
    border: 1px solid #CBCBCB; 
 
    text-align: left; 
 
    outline: none; 
 
    font-size: 15px; 
 
    transition: 0.4s; 
 
} 
 

 
.float-right{ 
 
    float: right; 
 
}

<button class="c-accordion">Section 2 
 
     <i class="material-icons float-right">keyboard_arrow_down</i> 
 
    </button>

来源

2017-09-25 Dummy

它似乎在代码片段在这里工作很好，所以......有什么实际问题？ – CBroe

@Croro Nope，在Firefox上不适用于我... – Fuross

@Fuross我明白了，但OP应该在问题中提到过。虽然这并不是特定转换的问题，但悬停在图标上并不适用于Firefox。 – CBroe

我能够在我身边的Mozilla Firefox浏览器相同的代码工作找到两个问题，

旋转工作正常在铬，但不工作在Firefox。
过渡并不顺畅，正如他人所说。

因此，对于第一个问题悬停改变从图标到伪按钮，因为有一个问题在Firefox里面的时候button使用<i>。对于第二个跟随其他人一样，加入transition。

@import url('https://fonts.googleapis.com/icon?family=Material+Icons'); 
 
.c-accordion:hover .material-icons { 
 
    -webkit-transform: rotate(180deg); 
 
    -ms-transform: rotate(180deg); 
 
    -o-transform: rotate(180deg); 
 
    transform: rotate(180deg); 
 
    transition: all .3s ease; 
 
} 
 

 
button.c-accordion { 
 
    background-color: #eee; 
 
    color: #444; 
 
    cursor: pointer; 
 
    padding: 5px; 
 
    width: 50%; 
 
    border: none; 
 
    border: 1px solid #CBCBCB; 
 
    text-align: left; 
 
    outline: none; 
 
    font-size: 15px; 
 
    transition: 0.4s; 
 
} 
 

 
.float-right { 
 
    float: right; 
 
}

<button class="c-accordion">Section 2 
 
      <i class="material-icons float-right">keyboard_arrow_down</i>

来源

2017-09-25 12:17:16

谢谢Rajesh，这工作。 – Dummy

图标旋转上的镀铬悬停鼠标而不是对铬

来源

2017-09-25 12:16:17

如何使用CSS悬停图标来旋转图标

回答

相关问题