如何使用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懸停圖標來旋轉圖標

回答

相關問題