CSS持久信息弹出窗口，弹出可用HTML

Question

我试图创建一个CSS弹出窗口，当悬停在一个对象上。这将是一个“信息”弹出窗口，但我想在此弹出窗口中与HTML进行交互。

我的想法是创建一个DIV，并在悬停，有一个风格，增加div，显示相关的HTML进行交互。退出调整大小的DIV后，正常样式将div缩小回原始大小。我不想使用jQuery或同等的弹出窗口，因为我需要尽可能快地进行交互。我不想创建一个弹出窗口，在离开弹出项目时消失，然后才能在弹出窗口中输入和与HTML进行交互。我很担心，有多个这样的对象（div），我不确定他们在调整大小时如何与对方交互，因为我可能需要将div绝对放置在不规则的布局中。

有没有更好的方法来解决这个问题？

我试图做的一个很好的例子就是Netflix的网页界面，当它悬停在标题上并与弹出窗口交互时。

Answer 1

好吧，我的Div布局的想法，如上所述，似乎是在伎俩。

我正在改变悬停和普通样式（对于普通的0，对于悬停的1为z）的z索引，对于每个div，并且绝对定位div。

这样，每个“悬停”悬停在所有其他折叠div的顶部。目前它为我做了伎俩。

如果有人能提出更好的实现方法，可能会比我现有的解决方案更有效，请将其添加为解决方案。

<div id="Container" style="position: relative" > 

<％ - 第一格 - 蓝 - ％>

</div> 
</td> 
<td style="padding: 5px; width: 120px; background-color: #0099FF; color: #FFFFFF;" > 

    This is my Unit<br /> 
    <br /> 
    Unit details<br /> 
    Unit Details 2<br /> 
    <br /> 
    <a href="test" style="color: #FFFFFF; font-weight: bold">Book Now</a></td> 
</tr> 
</table> 
</div> 

<%--2nd div - Red--%> 
<div class="unit2"> 
<table cellpadding="0" cellspacing="0"> 
<tr> 
<td style="width: 20px" valign="top"> 
<div style="width: 20px; height: 20px; background-color: #FF3300"> 

</div> 
</td> 
<td style="padding: 5px; width: 120px; background-color: #FF3300; color: #FFFFFF;" > 

    This is my Unit<br /> 
    <br /> 
    Unit details<br /> 
    Unit Details 2<br /> 
    <br /> 
    <a href="test" style="color: #FFFFFF; font-weight: bold">Book Now</a></td> 
</tr> 
</table> 
</div> 

<%--3rd div - Green--%> 
<div class="unit3"> 
<table cellpadding="0" cellspacing="0"> 
<tr> 
<td style="width: 20px" valign="top"> 
<div style="width: 20px; height: 20px; background-color: #009933"> 

</div> 
</td> 
<td style="padding: 5px; width: 120px; background-color: #009933; color: #FFFFFF;" > 

    This is my Unit<br /> 
    <br /> 
    Unit details<br /> 
    Unit Details 2<br /> 
    <br /> 
    <a href="test" style="color: #FFFFFF; font-weight: bold">Book Now</a></td> 
</tr> 
</table> 
</div> 
</div> 

CSS >>

.unit1 

{ 宽度：20像素; height：20px; 溢出：隐藏; position：absolute; top：0px; left：0px; z-index：0; } .unit1：hover { width：140px; 身高：自动; z-index：1; } .unit2 { width：20px; height：20px; 溢出：隐藏; position：absolute; top：5px; left：35px; z-index：0; } .unit2：hover { width：140px; 身高：自动; z-index：1; }

。unit3 { width：20px; height：20px; 溢出：隐藏; position：absolute; top：35px; left：20px; z-index：0; } .unit3：hover { width：140px; 身高：自动; z-index：1; }