使用here中的CSS-only方法我正在鼠标悬停上处理div扩展/弹出窗口。它的工作原理是因为隐藏的div是div的孩子。
我想让描述成为变量高度的一部分，我一直在寻找一种方法来排列 Price div，这样他们都会在相同的高度，而描述部分根据需要向下扩展（不指定描述的最小或最大高度）。
以前有许多关于等高div的问题，关于扩展div以填充td的问题，以及将div放在td的底部，但到目前为止我还没有找到任何可以同时执行此操作的方法保持悬停的亲子关系。
任何建议都将不胜感激。
body {font-family: sans-serif;text-align: center; }
div.special { position:relative; width:160px; background-color:white; border: solid white ;border-width:1px 1px 0px 1px;top:0px; }
div.special div.desc { width:160px;background-color:white; display:none; border: solid 0px;position:absolute; z-index:100;left:-1px;}
div.special:hover div.desc { display:block;border: solid grey; border-width:0px 1px 1px 1px;box-shadow: 10px 10px 5px #888888; }
div.special:hover {border: solid grey 1px;border-width:1px 1px 0px 1px; box-shadow: 10px 10px 5px #888888; z-index:100;}
table {text-align:center;margin:0 auto;}
<table >
<tr>
<td valign="top" >
<div class="special">
<img src="http://cdn1.iconfinder.com/data/icons/socialnetworkspro/128/Google-BUZZ.png">
<br><b>Description</b><br>
<div >Price</div>
<div class="desc">
Detailed Specs
<br>Other Info
</div>
</div>
</td>
<td valign="top" >
<div class="special">
<img src="http://cdn1.iconfinder.com/data/icons/socialnetworkspro/128/Google-BUZZ.png">
<br><b>Very Long Description</b><br>
<div >Price</div>
<div class="desc">
Detailed Specs
<br>Other Info
</div>
</div>
</td>
</tr>
</table>