html - 将 1 个 id 悬停在另一个 id 上时可见

Question

我正在寻找一种方法来完成这项工作:

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

例如:悬停在#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>

这是我当前的 css，但它不起作用

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

Answer 1

编辑:更新示例以使用兄弟选择器

你写的规则:

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

将一个 ID 为 #basishover1 的对象应用到另一个 ID 为 #imgHover1 且其伪类为 hover 的对象中。无论您将鼠标悬停在何处，您的 DOM 中都没有这样的对象，因此该规则不会匹配任何内容。

如果你想让它只与 CSS 一起工作，你必须将段落放在与你悬停的对象相同的容器中，在这种情况下可能是这样的:

<table>
<tr>
<td><a href="link" id="linkHover1"><img src="image"id="imgHover1"></a>
    <p id="basishover1">Basis</p></td>
<td><a href="link" id="linkHover2"><img src="image"id="imgHover2"></a>
    <p id="basishover2">Basis</p></td>
</tr>
</table>

使用这个 CSS:

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

您可能需要手动更正框的位置和大小以获得所需的效果。

如果你想保留原始的 DOM 结构，你必须使用少量的 javascript。这还有一个额外的好处，通过使用一些框架，您可以制作动画过渡。