Question

我目前在我的网站上使用内联SVG来改变:hover的颜色。由于图片包含透明部分，因此悬停效果仅适用于我path以上的情况。

示例：

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

我的问题是否只有CSS解决方案？如果我必须使用脚本，为什么我的工作不起作用？

Answer 1

使用：

svg:hover .green {
    fill: red;
}

Answer 2

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

将悬停效果应用于SVG的透明部分

2 个答案: