Блог

Главная - Вопросы по программированию - Развернуть контейнер без расширения родительской / целой строки

Развернуть контейнер без расширения родительской / целой строки

#html #css

#HTML #css — файл #css

Вопрос:

Я хочу создать эффект наведения курсора мыши, при котором при наведении курсора на родительский элемент отображается больше информации. Я зашел так далеко:

 ul{
  grid-column-gap: 21px;
    grid-row-gap: 40px;
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none outside;
    clear: both;
    grid-template-columns: repeat(3, 1fr);
}

ul li{
    text-align: center;
    border-style: solid;
    border-width: 2px 2px 2px 2px;
    border-radius: 0;
    padding: 10px 10px 10px 10px;
    background-color: #FFFFFF;
    border-color: #EAEAE3;
    width: auto;
    margin: 0;
    float: none;
}

.additional{
    height: 0;
    opacity: 0;
    transition: height 0.25s ease-out;
}

ul li:hover .additional{
    height: 50px;
    opacity: 1;
    transition: height 0.25s ease-in,opacity 0.25s ease-in;
}  
 <div class="container">
<ul>
<li>
  Title<br />
  Image<br />
  <div class="additional">
    Line 1<br />
    Line 2<br />
  </div>
  <input type="submit" value="Click here" />
</li>

<li>
  Title<br />
  Image<br />
  <div class="additional">
    Line 1<br />
    Line 2<br />
  </div>
  <input type="submit" value="Click here" />
</li>

<li>
  Title<br />
  Image<br />
  <div class="additional">
    Line 1<br />
    Line 2<br />
  </div>
  <input type="submit" value="Click here" />
</li>

<li>
  Title<br />
  Image<br />
  <div class="additional">
    Line 1<br />
    Line 2<br />
  </div>
  <input type="submit" value="Click here" />
</li>

<li>
  Title<br />
  Image<br />
  <div class="additional">
    Line 1<br />
    Line 2<br />
  </div>
  <input type="submit" value="Click here" />
</li>

<li>
  Title<br />
  Image<br />
  <div class="additional">
    Line 1<br />
    Line 2<br />
  </div>
  <input type="submit" value="Click here" />
</li>



</ul>

</div>

Как я могу добиться того, чтобы расширялся только контейнер наведения, но не остальная часть строки?
Я могу / должен перекрывать 2-й ряд и перекрывать их контейнеры.

Комментарии:

1. Для этого вам придется задействовать некоторое абсолютное позиционирование, чтобы вывести расширяющиеся части из обычного потока компоновки.

Ответ №1:

Предложение @CBrow было правильным. Я создал перенос div , который находится в абсолютном положении внутри относительного положения li , который также имеет фиксированную высоту. Для перекрытия мне также нужно было добавить z-индекс при наведении курсора мыши на «активный» элемент

 ul{
    grid-column-gap: 21px;
    grid-row-gap: 40px;
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none outside;
    clear: both;
    grid-template-columns: repeat(3, 1fr);
}

ul li{
    text-align: center;
    width: auto;
    margin: 0;
    float: none;
    height: 90px;
}

.additional{
    height: 0;
    opacity: 0;
    transition: height 0.25s ease-out;
}

ul li:hover .additional{
    height: 50px;
    opacity: 1;
    transition: height 0.25s ease-in,opacity 0.25s ease-in;
}

.container{
    border: 2px solid #EAEAE3;
    background-color: #FFFFFF;
    padding: 10px 10px 10px 10px;
    position: absolute;
    z-index: 5;
}  
 <ul>
<li>
  <div classs="container">
    Title<br />
    Image<br />
    <div class="additional">
      Line 1<br />
      Line 2<br />
    </div>
    <input type="submit" value="Click here" />
  </div>
</li>

<li><div classs="container">Title<br />Image<br /><div class="additional">Line 1<br />Line 2<br /></div><input type="submit" value="Click here" /></div></li>

<li><div classs="container">Title<br />Image<br /><div class="additional">Line 1<br />Line 2<br /></div><input type="submit" value="Click here" /></div></li>

<li><div classs="container">Title<br />Image<br /><div class="additional">Line 1<br />Line 2<br /></div><input type="submit" value="Click here" /></div></li>

<li><div classs="container">Title<br />Image<br /><div class="additional">Line 1<br />Line 2<br /></div><input type="submit" value="Click here" /></div></li>

<li><div classs="container">Title<br />Image<br /><div class="additional">Line 1<br />Line 2<br /></div><input type="submit" value="Click here" /></div></li>


</ul>

</div>

Ответ №2:

Возможно, вы захотите попробовать установить контейнер внутри div и задать параметры в html-файле.

https://www.w3schools.com/w3css/w3css_containers.asp