Html 不使用'；t根据儿童自动缩放

我想实现一个工具提示。最简单的想法是，当鼠标悬停在圆上时，显示一个矩形。我怎样才能做到这一点

我不想看到的是，当矩形没有精确地悬停在圆上时

请检查示例：

SVG：

---

因此，这个问题的最佳解决方案是使用

display:none

，而不是

opacity:0

。在写这个问题时，我没有检查哪些css选择器适用于SVG；没想到会有这样的展览。但事实确实如此

所以下面的代码是有效的：

<g x="282.7416666666667" y="252.6" width="3" height="3" class="tooltip-container">

  <circle cx="200" cy="120" r="20" value="12" class="tooltip-circle"></circle>

  <rect x="50" y="30" width="300" height="80" rx="4" ry="4" r="5" value="12" class="tooltip-box"></rect>

</g>

---

注意：我放置

元素的原因只是为了表明我正在尝试做什么。要点是，当svg元素设置为

display:none

时，容器

元素的大小会相应地计算，就好像svg元素根本没有被渲染一样。然后可以将元素设置为“悬停到容器上时显示：block”

，从而可以使用工具提示功能。

您希望悬停伪类附加到圆上，而不是g。当然，这是我尝试的第一件事。没用…给我看看你试过什么，这样我就可以改正了。谢谢。简单地说，将元素放在。那它就什么也看不出来了。。。你检查了我附加的代码笔链接了吗？你不能这样做，你需要修复CSS，这样它就只会像我在第一条评论中所说的那样将鼠标悬停应用到圆圈上。

.tooltip-box {
  fill: purple;
  opacity: 0;
  stroke-width: 1px;
}

.tooltip-container {
  &:hover > * {
    opacity: 1 !important;
  }
}

<g x="282.7416666666667" y="252.6" width="3" height="3" class="tooltip-container">

  <circle cx="200" cy="120" r="20" value="12" class="tooltip-circle"></circle>

  <rect x="50" y="30" width="300" height="80" rx="4" ry="4" r="5" value="12" class="tooltip-box"></rect>

</g>

.tooltip-box {
  fill: purple;
  opacity: 0;
  stroke-width: 1px;
}

.tooltip-container:hover > .tooltip-box {
  opacity: 1;
}