从这里使用纯 CSS 方法，我正在处理鼠标悬停时的 div 扩展/弹出窗口。它之所以有效，是因为隐藏的 div 是悬停的 div 的子级。
我想让Description成为可变高度的一部分，我一直在寻找一种方法来排列Price div，以便它们都显示在相同的高度，而 Description 部分根据需要向下扩展（没有指定描述的最小或最大高度）。
以前有很多关于等高 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>