Html 扩展DIV以填充TD而不破坏鼠标悬停功能
使用CSS-only方法,我正在使用鼠标悬停上的div扩展/弹出窗口。它之所以有效,是因为隐藏的div是悬停的div的子级 我想将说明部分设置为可变高度,我一直在寻找一种方法来排列价格div,使它们都显示在相同的高度,同时说明部分根据需要向下展开(不指定说明的最小或最大高度) 关于等高div,关于扩展div以填充td,以及关于将div放置在td底部的问题,前面已经回答了很多问题,但到目前为止,我还没有找到任何方法可以做到这一点,同时保持悬停的父子关系 任何建议都将不胜感激Html 扩展DIV以填充TD而不破坏鼠标悬停功能,html,css,html-table,onmouseover,Html,Css,Html Table,Onmouseover,使用CSS-only方法,我正在使用鼠标悬停上的div扩展/弹出窗口。它之所以有效,是因为隐藏的div是悬停的div的子级 我想将说明部分设置为可变高度,我一直在寻找一种方法来排列价格div,使它们都显示在相同的高度,同时说明部分根据需要向下展开(不指定说明的最小或最大高度) 关于等高div,关于扩展div以填充td,以及关于将div放置在td底部的问题,前面已经回答了很多问题,但到目前为止,我还没有找到任何方法可以做到这一点,同时保持悬停的父子关系 任何建议都将不胜感激 body{font-
body{font-family:sans-serif;text-align:center;}
div.special{位置:相对;宽度:160px;背景色:白色;边框:纯白;边框宽度:1px 1px 0px 1px;顶部:0px;}
div.special div.desc{width:160px;背景色:白色;显示:无;边框:实心0px;位置:绝对;z索引:100;左:-1px;}
div.special:hover div.desc{显示:块;边框:纯灰;边框宽度:0px 1px 1px;方框阴影:10px 10px 5px#8888888;}
特殊分类:悬停{边框:纯灰1px;边框宽度:1px 1px 0px 1px;方框阴影:10px 10px 5px#8888888;z索引:100;}
表{文本对齐:居中;边距:0自动;}
说明
价格
详细规格
其他信息
非常长的描述
价格
详细规格
其他信息
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>