javascript - 鼠标悬停CSS Position绝对div在另一个TD上显示

Question

我正在使用 HTML 表格。我的目标很简单。当鼠标悬停打开 div 打开时，我试图制作一个菜单。但是在这个工具表中。

当我将鼠标悬停在 <span>Telephone:</span> 上时元素低于元素 <div class="secondary_menu">...</div>在右侧可见 <td> 元素(使用 z-index)作为 位置 absolute .

查看JsFiddle

HTML:

<table style="width:100%">
  <tr>
    <td>
      <span>Telephone:<br /><br /><br /><br /><br /></span>
      <div class="secondary_menu">
        <ul>
          <li>My Dashboard</li>
          <li>My Dashboard</li>
          <li>My Dashboard</li>
          <li>My Dashboard</li>
        </ul>
      </div>
    </td>
    <td>555 77 854</td>
  </tr>
</table>

使用 CSS、jquery。

Answer 1

您可以使用 :hover 和兄弟选择器单独在 CSS 中完成此操作:

table span:hover + .secondary_menu {
    display: block;
}

Updated fiddle