Question

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

我的想法是创建一个DIV，并在悬停时，有一个增长div的样式，显示与之交互的相关HTML。退出调整大小的DIV时，正常样式将div缩小回原始大小。我不想使用jQuery或等效的弹出窗口，因为我需要尽可能快地进行交互。我不想创建弹出窗口，在弹出弹出它的项目时会消失，然后才能在弹出窗口中输入HTML并与之交互。

我担心的是，拥有多个这些对象（div），我不确定它们在调整大小时会如何相互交互，因为我可能需要以不规则的布局绝对定位div。

有更好的方法可以解决这个问题吗？

我尝试做的一个很好的例子是Netflix网络界面，当悬停在标题上，并与弹出窗口进行交互。

Answer 1

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

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

这样，每个“悬停”都悬停在所有其他崩溃的div之上。它暂时为我做了诀窍。

如果有人可以建议更好的方法来实现这一目标，我可能会比现有的解决方案更有效，请添加您的解决方案。

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

＆lt;％ - 第一个div - 蓝色 - ％＆gt;

</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＆gt;＆gt;

.unit1

{ 宽度：20px; 身高：20px; 溢出：隐藏; 位置：绝对; 顶部：0px; 左：0px; z-index：0; } .unit1：悬停 { 宽度：140px; 身高：自动; z-index：1; } 。单元2 { 宽度：20px; 身高：20px; 溢出：隐藏; 位置：绝对; 顶部：5px; 左：35px; z-index：0; } .unit2：悬停 { 宽度：140px; 身高：自动; z-index：1; }

.unit3 { 宽度：20px; 身高：20px; 溢出：隐藏; 位置：绝对; 上：35px; 左：20px; z-index：0; } .unit3：悬停 { 宽度：140px; 身高：自动; z-index：1; }

CSS Persistant信息弹出窗口，弹出窗口中有可用的HTML

1 个答案: