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。这具有额外的优势，通过使用某个框架，您可以设置过渡动画。

当悬停另一个时，使1个ID可见

1 个答案: