当将鼠标悬停在SVG按钮上时,它不会改变颜色可能是由于以下几个原因:
svg:hover {
fill: #ff0000; /* 设置悬停时的填充颜色 */
}
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect id="btn" width="100" height="100" fill="#000000" />
<script>
var btn = document.getElementById('btn');
btn.addEventListener('mouseover', function() {
btn.setAttribute('fill', '#ff0000'); // 设置悬停时的填充颜色
});
btn.addEventListener('mouseout', function() {
btn.setAttribute('fill', '#000000'); // 恢复默认填充颜色
});
</script>
</svg>
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云