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 に答える