jquery - 我想通过 css 将鼠标悬停在 anchor 标记上时显示 div

Question

我想通过 CSS 将鼠标悬停在 anchor 标记上时显示 div。这是我的代码，但不起作用。我也想用 CSS 慢动作显示 div。

#shoow {
  display: none;
}
#hoverMe:hover #shoow {
  display: block;
}

<a href="#" id="hoverMe">ShowDetails</a>
<table>
  <tr>
    <td id="shoow" style="width: 650px; height: 100px; background-color: blue;"></td>
  </tr>
</table>

Answer 1

您需要将第二个选择器更改为:

#hoverMe:hover + table #shoow {
  display: block;
}

#hoverMe:hover #shoow，您现在拥有的是尝试查找 ID 为 shoow 的元素作为 ID 为 hoverMe 的元素的后裔，但事实并非如此。但是，如果您使用相邻的兄弟选择器 (+) 或兄弟选择器 (~)，它将起作用。

#shoow {
  display: none;
}
#hoverMe:hover + table #shoow {
  display: block;
}

<a href="#" id="hoverMe">ShowDetails</a>
<table>
  <tr>
    <td id="shoow" style="width:650px;height:100px;background-color:blue;"></td>
  </tr>
</table>