Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/css/37.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Html 扩展DIV以填充TD而不破坏鼠标悬停功能_Html_Css_Html Table_Onmouseover - Fatal编程技术网

Html 扩展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-

使用CSS-only方法,我正在使用鼠标悬停上的div扩展/弹出窗口。它之所以有效,是因为隐藏的div是悬停的div的子级

我想将说明部分设置为可变高度,我一直在寻找一种方法来排列价格div,使它们都显示在相同的高度,同时说明部分根据需要向下展开(不指定说明的最小或最大高度)

关于等高div,关于扩展div以填充td,以及关于将div放置在td底部的问题,前面已经回答了很多问题,但到目前为止,我还没有找到任何方法可以做到这一点,同时保持悬停的父子关系

任何建议都将不胜感激

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>​