html - Css悬停链接显示表格

Question

所以我试图在悬停链接时制作一个下拉菜单。链接下方显示了一个表格。我不明白为什么它不起作用。查看小提琴链接。

固定链接 http://jsfiddle.net/ThobiasN/Pt3db/

html代码示例：

<a class='nav' href='#'>Hover me</a>
<table>
    <tr>
        <td class='dropdown'><p>Show me</p></td>
    </tr>
</table>

CSS代码示例：

td.dropdown
{
    display:none;
}

a.nav:hover > table
{
    display:block;
}

Answer 1

因为该表不是链接的子项。CSS中的符号>相当于“direct child of”

尝试将表格放在链接内。

Answer 2

<table>是链接元素的兄弟。使用 + 对兄弟进行操作。

a.nav + table {
  display: none;

}
a.nav:hover + table {
  display: block;
}

Answer 3

这是正确的方法，CSS：

a.nav + table tr td.dropdown
{
display:none;
}

a.nav:hover + table tr td.dropdown
{
display:block;
}

您需要隐藏和显示相同的元素，如果隐藏表格，则不显示 TD，反之亦然

或者，显示和隐藏表格而不是 TD、CSS：

a.nav + table 
{
display:none;
}

a.nav:hover + table 
{
display:block;
}

还要记住一件事，+ 指的是兄弟元素，> 指的是直接子元素

Answer 4

a.nav:hover > table 表示 table 应该在 a.nav 内。首先这里不要用table，用ul比较好，放在a.nav里面

<a class='nav' href='#'>Hover me
  <ul>
    <li>Show me</li>
  </ul>
</a>

Answer 5

我认为最后你需要使用一些Javascript代码来实现这一点，但你做错的是：

• >simbol 用于直接孩子
• 您要display: none为table元素设置，而不是td

解决方案：

• 更改此>符号的符号：+获取下一个元素
• 改变一点你的CSS

HTML

<a class='nav' href='#'>Hover me</a>
<table>
    <tr>
        <td class='dropdown'><p>Show me</p></td>
    </tr>
</table>

CSS

table{
    display:none;
}

a.nav:hover + table{
    display:block;
}

JSFiddle

http://jsfiddle.net/Pt3db/5/

加上建议

• 改用无序列表table（表格数据的表）
• 您将无法单击子导航元素，这就是为什么我认为您需要一些 Javascript
• 有很多不错的导航插件可供您使用，至少您正在学习不要重新发明轮子；）

Answer 6

使用 CSS Fiddle

它似乎以任何一种方式工作，但这是我喜欢的方式，即使它不是 css：

$('.nav').hover(function () {
    $('table').css('display', 'block');
});

table{    
    display:none;
}

Answer 7

HTML 代码

<a class='nav' href='#'>Hover me </a>
<table class='dropdown'>
    <tr>
        <td ><p>Show me</p></td>
    </tr>
</table>

CSS 代码

table.dropdown
{
    display:none;
}
a.nav:hover + table
{
    display:block;
    color: green;
}