0

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

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

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

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

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

4

1 回答 1

0

Ok, my Div layout idea, as above, seems to be doing the trick.

I am changing the z index on hover and normal style's ( of 0 for normal, and z of 1 for hover), for each div, and absolutely positioning the div's.

This way, each "hover" hovers on top of all the other collapsed div's. Its doing the trick for me, for now.

I am leaving this as unanswered, if someone can suggest a better way of achieving this, that might be more efficient than my current solution, please add your solution.

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

<%--1st div - Blue--%> 

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

{ width: 20px; height: 20px; overflow: hidden; position: absolute; top: 0px; left: 0px; z-index: 0; } .unit1:hover { width: 140px; height: auto; z-index: 1; } .unit2 { width: 20px; height: 20px; overflow: hidden; position: absolute; top: 5px; left: 35px; z-index: 0; } .unit2:hover { width: 140px; height: auto; z-index: 1; }

.unit3 { width: 20px; height: 20px; overflow: hidden; position: absolute; top: 35px; left: 20px; z-index: 0; } .unit3:hover { width: 140px; height: auto; z-index: 1; }

于 2013-06-25T20:12:12.640 回答