jquery - 对 SVG 的透明部分应用悬停效果

Question

我目前在我的网站上使用内联 SVG，它会在 :hover 上改变颜色。由于图像包含透明部分，悬停效果仅在我位于 path 上时适用。

示例:

$(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 解决方案？如果我必须使用脚本，为什么我的脚本不起作用？

Answer 1

由于您正在监听 SVG 父级上的鼠标输入事件，因此您不需要使用 JS——选择器 svg:hover .green 应该可以正常工作。