css - 不同的下拉列表组件

Question

我想创建一个组件如下:

它将类似于下拉列表。我想在表格行的每个单元格 (td) 中使用此组件。所以我的问题是要在第一个 div 下但在表格行上方显示第二个 div(元素列表)。

你能帮我看看它的 CSS 吗？

Answer 1

首先，我会让 popout div 飞到上方而不是下方。这样做的原因是它会自动位于“上方”(以 z-index 术语表示)上方的元素，因此它不会被连续的表格行覆盖。

其次，你会想要这样的东西:

<div class="action">
   <div class="select"><!-- select box here --></div>
   <div class="popout"><!-- stuff here --></div>
</div>

然后像这样用 CSS 激活它:

div.action {
   width:75px;
   height:30px;
   position:relative;
}
div.select {
   position:absolute;
   top:0;
   left:0;
}
div.popout {
   position:absolute;
   left:0;
   bottom:30px;
   width:300px;
   display:none; /* it will be revealed on hover */
}
div.action:hover div.popout {
   display:block;
}

要使它在旧版本的 IE 中工作，您可以将此 JavaScript 添加到操作 div 中:

<div class="action" onmouseover=""this.className='action hover'" onmouseout="this.className='action'">

然后使用类悬停代替状态:

div.hover div.popout {
   display:block;
}

我希望这就是你的意思! :)