html - SVG 操作与 jsfiddle 一起工作，而不是在浏览器/本地主机(SVG)中

Question

我试图在我的 SVG 文件上创建悬停效果，即使我的鼠标位于 SVG 的透明部分。截至目前，该 Action 仅在悬停形状时激活。我试过了

pointer-events: bounding-box;

没有任何运气(php storm 甚至不识别该值)也尝试了值 all 和其他值。奇怪的是它适用于 jsfiddle但不在本地主机中。

一直在谷歌上疯狂搜索，希望有人对此有解决方案!

Answer 1

只需设置pointer-events: none在 SVG 上并在父级上进行悬停测试 <div> .

div {
  width: 200px;
  height: 200px;
}

div:hover svg circle {
  fill: blue;
}

<div>
  <svg width="200px" height="200px" pointer-events="none">
    <circle cx="100" cy="100" r="95" fill="red"/>
  </svg>
</div>