Всплывающее всплывающее окно CSS с полезными HTML-окнами

Question

Я пытаюсь создать всплывающее окно CSS при наведении курсора на объект. Это будет всплывающее окно «info», но я хочу взаимодействовать с HTML внутри этого всплывающего окна.

Моя идея - создать DIV, а при наведении - стиль, который увеличивает div, показывая соответствующий HTML для взаимодействия. После выхода из измененного DIV, нормальный стиль, чтобы уменьшить размер div до исходного размера. Я не хочу использовать jQuery или эквивалентные всплывающие окна, так как мне нужно, чтобы взаимодействие было как можно быстрее. Я не хочу создавать всплывающее окно, которое исчезает, когда вы покидаете элемент, который его выталкивал, прежде чем он сможет войти и взаимодействовать с HTML во всплывающем окне.

Мои заботы состоят в том, что у них много таких объектов (div), я не уверен, как они будут взаимодействовать друг с другом, когда они будут изменены, так как мне, вероятно, понадобится абсолютное положение divs в нерегулярном макете.

Есть ли лучшие способы сделать это?

Хорошим примером того, что я пытаюсь сделать, является веб-интерфейс Netflix, зависающий над заголовком и взаимодействующий с всплывающим окном.

Answer 1

Хорошо, моя идея макета Div, как и выше, кажется, делает трюк.

Я меняю индекс z на зависание и нормальный стиль (из 0 для нормального и z из 1 для наведения), для каждого 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 

{ ширина: 20px; высота: 20px; переполнение: скрыто; позиция: абсолютная; верх: 0px; Слева: 0px; z-index: 0; } .unit1: hover { ширина: 140px; высота: авто; z-index: 1; } .unit2 { ширина: 20px; высота: 20px; переполнение: скрыто; позиция: абсолютная; верх: 5px; Слева: 35px; z-index: 0; } .unit2: hover { ширина: 140px; высота: авто; z-index: 1; }

.unit3 { ширина: 20px; высота: 20px; переполнение: скрыто; позиция: абсолютная; верх: 35px; left: 20px; z-index: 0; } .unit3: hover { ширина: 140px; высота: авто; z-index: 1; }