在SVG的透明部分應用懸停效果

我目前在我的網站上使用內聯SVG，它在:hover上更改顏色。由於圖像包含透明部分，因此懸停效果僅適用於當我超過path時。在SVG的透明部分應用懸停效果

例：

$(function() { 
 
    $('svg').mouseenter(function() { 
 
    $('.green').toggleClass("hovered"); 
 
    }); 
 
});

.green.hovered { 
 
    fill: blue; 
 
} 
 
.green { 
 
    fill: green; 
 
} 
 
.green:hover { 
 
    fill: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
 
<svg xmlns="http://www.w3.org/2000/svg" width="130.379" height="130.379" viewBox="0 0 130.379 130.379"> 
 
    <path class="green" d="M68.15 78.234H57.785v-4.332c0-18.566 20.05-18.34 20.05-30.87 0-6.267-5.58-9.8-12.986-9.8-5.354 0-11.28 2.508-15.95 8.203l-7.292-5.468c6.61-7.745 14.81-11.39 24.266-11.39 14.354 0 22.898 8.653 22.898 17.767 0 18.228-20.62 15.84-20.62 32.128v3.762zM63.253 89.97c4.56 0 7.978 3.528 7.978 7.854 0 4.443-3.417 7.98-7.977 7.98-4.443 0-7.86-3.536-7.86-7.98 0-4.326 3.417-7.855 7.86-7.855z M65.19 0C29.186 0 0 29.187 0 65.19s29.187 65.188 65.19 65.188 65.188-29.187 65.188-65.19S101.192 0 65.188 0zm0 120.13c-30.343 0-54.94-24.6-54.94-54.94 0-30.342 24.598-54.94 54.94-54.94s54.938 24.598 54.938 54.94c0 30.34-24.596 54.94-54.94 54.94z" 
 
    /> 
 
</svg>

是否有一個唯一的CSS-解決我的問題？如果我必須使用腳本，爲什麼不是我的工作？

來源

2015-11-22 idleberg

你不能使用'svg：hover .green'嗎？那麼你將不必使用JS;） – Terry

謝謝，這是工作！現在感覺很愚蠢，但我只嘗試過'svg .green：hover'，那沒有做任何事情。隨意回答這個問題，我會接受解決方案。 – idleberg

既然你聽鼠標放在SVG父進入事件，就不需要使用JS-選擇svg:hover .green應該只是罰款。

來源

2015-11-22 16:34:54 Terry

用途：

svg:hover .green { 
    fill: red; 
}

來源

2015-11-22 16:33:44

在SVG的透明部分應用懸停效果

回答

相關問題