背景圖像（SVG）更改：懸停行爲有趣

Question

當我將鼠標懸停在div上時，background-image應該更改爲另一個。然而，它似乎開始與一個小圖像，然後放大到所需的實際大小...

什麼可能導致此？

JSFiddle

.animate { -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } 
 

 
div.rating_system { 
 
\t position: relative; float: left; clear: none; display: block; 
 
\t width: 260px; height: 50px; 
 
} 
 

 
div.rating_system input[type=radio] { display: none; visibility: collapse; } 
 

 
div.rating_system input[type=radio] + label { 
 
\t position: relative; float: right; clear: none; display: block; 
 
\t width: 18.4%; height: 100%; margin: 0; padding: 0 2% 0 0; 
 
\t outline: 0; cursor: pointer; 
 
\t 
 
\t background-image: url('data:image/svg+xml;utf8,<svg version="1.1" fill="#2C3E50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 110 105" style="enable-background:new 0 0 110 105;" xml:space="preserve"><ellipse opacity="0.3" cx="55" cy="52.5" rx="55" ry="52.5"/><path d="M55,8c25.9,0,47,20,47,44.5S80.9,97,55,97S8,77,8,52.5S29.1,8,55,8 M55,0C24.6,0,0,23.5,0,52.5c0,29,24.6,52.5,55,52.5s55-23.5,55-52.5C110,23.5,85.4,0,55,0L55,0z"/></svg>'); 
 
\t background-repeat: no-repeat; 
 
\t background-position: center center; 
 
\t background-size: 40px; 
 
} 
 
div.rating_system input[type=radio]#star-5 + label { padding: 0 0 0 0; } 
 

 
div.rating_system:hover > input[type=radio] + label:hover, 
 
div.rating_system:hover > input[type=radio] + label:hover ~ label, 
 
div.rating_system > input[type=radio]:checked ~ label { 
 
    background-image: url('data:image/svg+xml;utf8,<svg version="1.1" fill="#2C3E50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 110 105" style="enable-background:new 0 0 110 105;" xml:space="preserve"><ellipse cx="55" cy="52.5" rx="55" ry="52.5"/></svg>'); 
 
}

<div class="rating_system"> 
 
\t \t \t <input type="radio" id="star-5" name="rating-01" value="5" class="animate"><label for="star-5" class="animate"></label> 
 
\t \t \t <input type="radio" id="star-4" name="rating-01" value="4" class="animate"><label for="star-4" class="animate"></label> 
 
\t \t \t <input type="radio" id="star-3" name="rating-01" value="3" class="animate"><label for="star-3" class="animate"></label> 
 
\t \t \t <input type="radio" id="star-2" name="rating-01" value="2" class="animate"><label for="star-2" class="animate"></label> 
 
\t \t \t <input type="radio" id="star-1" name="rating-01" value="1" class="animate"><label for="star-1" class="animate"></label> 
 
</div>

Answer 1

它看起來像一個瀏覽器的bug。我可以建議你根據:after pseudo-element和transition跨瀏覽器的解決方案通過opacity：

JSFiddle（簡化你的代碼片斷）

.rating-system { 
 
    float: left; 
 
    display: block; 
 
    width: 260px; 
 
    height: 50px; 
 
} 
 

 
input { 
 
    display: none; 
 
} 
 

 
label { 
 
    position: relative; 
 
    float: right; 
 
    display: block; 
 
    width: 18.4%; 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0 2% 0 0; 
 
    outline: 0; 
 
    cursor: pointer; 
 

 
    background-image: url('data:image/svg+xml;utf8,<svg version="1.1" fill="#2C3E50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="110" height="105"><ellipse opacity="0.3" cx="55" cy="52.5" rx="55" ry="52.5"/><path d="M55,8c25.9,0,47,20,47,44.5S80.9,97,55,97S8,77,8,52.5S29.1,8,55,8 M55,0C24.6,0,0,23.5,0,52.5c0,29,24.6,52.5,55,52.5s55-23.5,55-52.5C110,23.5,85.4,0,55,0L55,0z"/></svg>'); 
 
    background-repeat: no-repeat; 
 
    background-position: 50% 50%; 
 
    background-size: 40px; 
 
} 
 

 
label:first-of-type { 
 
    padding: 0; 
 
} 
 

 
label:after { 
 
    content: ''; 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    top: 0; 
 
    left: 0; 
 
    
 
    background-image: url('data:image/svg+xml;utf8,<svg version="1.1" fill="#2C3E50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="110" height="105"><ellipse cx="55" cy="52.5" rx="55" ry="52.5"/></svg>'); 
 
    background-repeat: no-repeat; 
 
    background-position: 50% 50%; 
 
    background-size: 40px; 
 
    
 
    
 
    opacity: 0; 
 
    -webkit-transition: opacity 0.2s ease-in-out; 
 
    -moz-transition: opacity 0.2s ease-in-out; 
 
    -o-transition: opacity 0.2s ease-in-out; 
 
    transition: opacity 0.2s ease-in-out; 
 
} 
 

 
label:hover:after, 
 
label:hover ~ label:after, 
 
input:checked ~ label:after { 
 
    opacity: 1; 
 
}

<div class="rating-system"> 
 
    <input type="radio" id="star-5" name="rating-01" value="5"/> 
 
    <label for="star-5"></label> 
 
    <input type="radio" id="star-4" name="rating-01" value="4"/> 
 
    <label for="star-4"></label> 
 
    <input type="radio" id="star-3" name="rating-01" value="3"/> 
 
    <label for="star-3"></label> 
 
    <input type="radio" id="star-2" name="rating-01" value="2"/> 
 
    <label for="star-2"></label> 
 
    <input type="radio" id="star-1" name="rating-01" value="1"/> 
 
    <label for="star-1"></label> 
 
</div>