Html 将1个id悬停在另一个id上时使其可见

我正在寻找一种方法来实现这一目标：

当我将鼠标悬停在一个链接或图像上时，相应的段落应该是可见的

例如：将鼠标悬停在#imgHover1上会使#basishover1可见

<table>
<tr>
<td><a href="link"><img src="image"id="imgHover1"></a></td>
<td><a href="link"><img src="image"id="imgHover2"></a></td>
<td><a href="link"><img src="image"id="imgHover3"></a></td>
<td><a href="link"><img src="image"id="imgHover4"></a></td>
<td><a href="link"><img src="image"id="imgHover5"></a></td>
</tr>
<tr>
<td><p id="basishover1">Basis</p></td>
<td><p id="basishover2">Basis</p></td>
<td><p id="basishover3">Basis</p></td>
<td><p id="basishover4">Basis</p></td>
<td><p id="basishover5">Basis</p></td>
<tr>

---

编辑：更新了使用同级选择器的示例

你写的规则是：

#imgHover1:hover#basispover1{
能见度：可见；
}

将id为

#basishover1

的对象应用于id为

#imgHover1

且伪类为

hover

的另一个对象内部。您的DOM中没有这样的对象，无论您将鼠标悬停在何处，因此此规则不会匹配任何内容

如果你想让它只使用CSS，你必须把段落放在与你悬停的对象相同的容器中，在这种情况下可能是这样的：

基础

基础

使用此CSS：

您可能需要手动更正长方体的位置和大小，以获得所需的效果

---

如果您想保持原始DOM结构，就必须使用少量javascript。这还有另外一个好处，通过使用一些框架，您可以设置过渡动画。

css选择器只允许在当前规范中选择子元素或兄弟元素。如果您希望保持html的原样，则需要使用JS来处理悬停事件。您建议我如何更改html以使其可行？这是纯css解决方案的正确想法，我只想补充一点，你可以选择一个兄弟姐妹，因此不需要在链接内部移动。谢谢你的帮助，我现在意识到使用JS的建议比我原来的方法更好，我将使用JS@aw04你这是什么意思？你能在回答中也举个例子吗？我很想看看。@pqnet我会在有时间的时候添加一个答案，不过请查看兄弟选择器，看看如何在@aw04之前或之后使用，它们也在CSS2中得到支持。我怎么能这么长时间不注意到这样的特征呢？

#basishover1 {
visibility: hidden;
}
#imgHover1:hover  #basishover1{
visibility: visible;
}

#basishover1 {
visibility: hidden;
}
#linkHover1:hover ~ #basishover1{
visibility: visible;
}