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; }