Div, зависающий над другим div - высота / Ширина

#html #hover

#HTML #наведите курсор

Вопрос:

Я пытаюсь сделать так, чтобы один div зависал над другим div, полным контента. Это можно сделать, используя position:absolute и z-index . Проблема в том, что я хочу, чтобы зависший div был той же высоты и ширины, что и div, заполненный содержимым.

Я пробовал 100% высоту и ширину, но с тех пор, как я написал:

 <div class=hover></div><div id=content>FULL OF CONTENT</div>

наведенный указатель мыши не распознает, какова высота и ширина содержимого div.

Есть какие-нибудь предложения?

Ответ №1:

Поместите зависший div внутри другого div:

 /* CSS */
#content {
  position: relative;
}
.hover {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

<div id="content">
  Content goes here.
  <div class="hover">
  </div>
</div>

Наведенный указатель мыши может находиться только над содержимым. Если вы установите какие-либо границы или поля на внешнем div, наведенный div не будет закрывать это.

1. Спасибо, я считаю, что моей единственной ошибкой было то, что я не поместил position:relative во внешний div, потому что я пытался поместить hoverdiv внутри. Позвольте мне попробовать это и посмотреть, работает ли это для меня.

2. Да, относительное значение важно. Наведенный div будет позиционироваться как абсолютный к первому родительскому элементу, у которого также есть позиция. Если вы не добавляете position: relative к родительскому div, наведенный div будет позиционироваться как абсолютный к телу.

3. Теперь я просто пытаюсь показать содержимое через div, если я добавлю стиль наведения на указатель мыши. Я знаю, что могу сделать прозрачный, но IE довольно плохо относится к прозрачным пленкам!