CSS轉換沒有發生：懸停，但發生在：活動

我有幾個SVG我試圖動畫。當我懸停或點擊整個svg時，孩子們應該改變顏色。這一切都工作。我想動畫顏色變化上：懸停和：活動，但得到不一致的結果。點擊SVG時，動畫會運行，但不會懸停。這對我來說似乎很奇怪。CSS轉換沒有發生：懸停，但發生在：活動

.fillStroke { 
 
    fill: #007fa3; 
 
    transition: all 0.3s ease; 
 
} 
 

 
.icon:hover .fillStroke { 
 
    stroke: #007fa3; 
 
} 
 

 
.icon:active .fillStroke { 
 
    fill: #333333; 
 
    stroke: #333333 
 
}

<svg id="Layer_1" class='icon' data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14.85 15" height='auto' width='100px'> 
 
    <title>icon</title> 
 
    <g id="_Group_AttachS" data-name="&lt;Group&gt;AttachS"> 
 
    <path id="fillStroke" class="fillStroke" d="M5,15a4.54,4.54,0,0,1-1.17-.16A5.36,5.36,0,0,1,.14,11.22,3.85,3.85,0,0,1,1.23,7.39L7.33,1A3.18,3.18,0,0,1,12,1.06a3.14,3.14,0,0,1,.1,4.57L6.31,11.38a1.77,1.77,0,0,1-1.74.5,2.06,2.06,0,0,1-1.42-1.4,1.55,1.55,0,0,1,.42-1.54L8.29,4.13l.71.7L4.27,9.64a.55.55,0,0,0-.16.57,1.05,1.05,0,0,0,.71.69.77.77,0,0,0,.78-.24l5.75-5.75a2.12,2.12,0,0,0-.1-3.16A2.18,2.18,0,0,0,8,1.66L1.95,8.09A2.85,2.85,0,0,0,1.1,11a4.39,4.39,0,0,0,3,2.92,3.1,3.1,0,0,0,3.11-.82c3.14-3.14,6.87-6.76,6.91-6.8l.7.72s-3.76,3.65-6.9,6.79A4,4,0,0,1,5,15Z"/> 
 
    </g> 
 
    </svg>

這裏有一個codepen一個鏈接，讓我想要做的很明顯。 https://codepen.io/cameronlewis35/pen/XgLxoP

來源

2017-07-19 camlewis

它正在爲我懸停。 – Korgrue

不能在關鍵字屬性（如none您CodePen）和值屬性（如#0016e4）之間轉換。如果您想使用可翻譯的關鍵字屬性，則可以嘗試transparent，因爲它的功能與rgba(0, 0, 0, 0)類似，並且在該目標和目標之間有明確的步驟。

示例這裏：https://codepen.io/anon/pen/QgXzBW

來源

2017-07-19 20:02:08

謝謝。這將做到這一點 – camlewis

CSS轉換沒有發生：懸停，但發生在：活動

回答

相關問題