悬停链接显示表格包装在divs和表

好吧，所以我最近发布了一个问题，但遇到了另一个问题。悬停链接显示表格包装在divs和表

我想做一个导航菜单，你把鼠标悬停在一个链接上，并显示一张表。现在的问题是，在我的代码中，链接被打包在两个div中，一张表和我试图展示的表也在整个shebang中。我做了一个示例代码向您展示

小提琴链接：http://jsfiddle.net/ThobiasN/FJksb/24/

HTML代码：

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

CSS代码：

div table tr td.dropdown 
{ 
    display:none; 
} 

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

来源

2013-02-11 Thobias Nordgaard

是否有你的CSS坚持任何理由而不是使用JavaScript？ JavaScript可能会使这更容易。但是，如果你想纯粹使用CSS，我认为你需要把你的表放到用户必须悬停的项目中。因此，而不是你有你的问题是什么，使用这样的结构：

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

你会那么需要适当样式的<a>标签，把链接文字中<span>标签内，如果需要的话，这样你就可以使它仍然看起来像一个链接。

的CSS实际上使菜单的工作将是这个样子：

.nav:link .dropdown { 
    display: none; 
} 

.nav:hover .dropdown, .nav:active .dropdown { 
    display: block; 
}

所有这一切都告诉浏览器要做的是使表归类dropdown内的活动或徘徊nav链接出现，消失当它不活动或者被搁置时。

我创建an example here，只记住，我已经使用的<table>小号<div>！而非，虽然你可以把你的<table>的<div>内，我已经使用的类名menu和content分别代替nav和dropdown。

希望这会有所帮助。祝你好运。

来源

2013-02-11 19:01:35 guypursey

悬停链接显示表格包装在divs和表

回答

相关问题