当我将鼠标悬停在div上时,background-image
应该更改为另一个。然而,它似乎开始与一个小图像,然后放大到所需的实际大小...背景图像(SVG)更改:悬停行为有趣
什么可能导致此?
.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>
@MrLister尝试将鼠标悬停在圈子里,点击一些然后再次徘徊... – Borsn
@Borsn它完全失败在FF。在铬中,你可以看到一些东西。 – timo
@timo可能是因为svg内联使用...如果我链接文件,它会修复它。不过,我试图通过链接文件,仍与悬停相同。 – Borsn