HTML SVG 如何将元素更改为在鼠标悬停时可见/隐藏

Question

我有这样的东西：

<circle class="node" cx="" cy="" r="10" fill="green" />
<text class="description" x="-20" y="-10">Lorem description</text>

我尝试使用纯 CSS 将description设置为隐藏/可见，将鼠标悬停在绿色 svg 圆圈上，或者如果无法使用 javascript。我不想/不能将description从class更改为id.

有人可以帮助我吗？

Answer 1

在您的情况下，您只需要添加此 CSS，因为.description前面紧

跟着.node

.node:hover + .description { visibility: visible}

就这样完成了。这将跟踪具有类.node的元素上的悬停操作，并使具有类.description的下一个相邻元素在悬停时可见（.node）。

这是小提琴

现在假设.description不是在前面有.node，并且其他一些元素位于它们之间，那么您可以添加以下 CSS

.node:hover ~ .description { visibility: visible}

~组合器将两个选择器分开，并且仅当第二个元素前面是第一个元素时才匹配第二个元素，并且两个元素共享一个共同的父元素。

因此，在这两种情况下，在对案例使用此CSS选择器技术时，.node都应位于.description之前

Answer 2

添加这个 css 类，它必须正常工作。

.node:hover + .description { visibility: visible}