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

Question

我有这样的事情：

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

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

有人可以帮我这个吗？

Answer 1

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

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

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

以下是 FIDDLE

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

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

~组合子将两个选择器分开并仅在第一个元素前面与第二个元素匹配，并且它们共享一个共同的父元素。

因此，在.node之前，.description使用此CSS选择器技术的情况应该位于 <td class='n' id='1_A'>T</td> <td class='n' id='1_B'>F</td> <td class='n' id='1_C'>T</td> <td class="row_num">1</td> <td class='n' id='1_D'>T</td> <td class='n' id='1_E'>F</td> <td class='n' id='1_F'>T</td>

之前

Answer 2

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

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