如何在javascript对象上创建简单的mouseover/mouseout操作

例如，鼠标悬停时将显示一个简单的矩形，其中包含文本“Hello World”：

<rect id="svg_1" height="100" width="165" y="101" x="136" stroke-width="5" stroke="#000000" fill="#FF0000"/>
<text xml:space="preserve" text-anchor="middle" font-family="serif" font-size="24" id="svg_2" y="88" x="221" stroke-width="0" stroke="#000000" fill="#000000">Hello World</text>

你好，世界

在CSS中：

text {
 visibility: hidden;
}

text :hover {
 visibility: visible;
}

---

Hello World这是我想使用的代码，我想在鼠标悬停在形状上时显示文本“Hello World”。您可能想在矩形悬停时显示文本，如前所述，这不起作用，因为没有可悬停的文本。如果文本始终是rect的下一个同级

rect:hover+text{visibility:visible；}

将起作用。“没有文本可悬停”heum nope，visibility只是隐藏仍然“显示”的文本