2

У меня есть сетка из 3х3 ячеек. Когда я навожу курсор на одну из ячеек, она должна расшириться на весь ряд. Но это не происходит.

При наведении курсора на 1 ячейку она полностью заполняет экран, а при наведении на 3 ячейку экран начинает мигать, и это не работает, как должно быть.

.container {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(3, minmax(100px, auto));
  grid-template-rows: repeat(3, minmax(100px, auto));
}

[class^="item"] {
  text-align: center;
  box-sizing: border-box;
  padding: 10%;
  font-size: 5em;
  color: #0580d5;
  transition: .2s;
}

[class^="item"]:hover {
  grid-column-start: 1;
  grid-column-end: 4;
}

.item-1 {
  /*grid-area: 1 / 2 / span 2 / span 2;*/
}

.container>div {
  border: 2px solid #0580d5;
  background-color: rgba(40, 180, 240, .3);
  border-radius: 5px;
}

@media only screen and (min-width: 789px) {
  .container {
    grid-template-columns: repeat(3, 1fr);
  }
}
<div class="container">
  <div class="item-1">1</div>
  <div class="item-2">2</div>
  <div class="item-3">3</div>
  <div class="item-4">4</div>
  <div class="item-5">5</div>
  <div class="item-6">6</div>
  <div class="item-7">7</div>
  <div class="item-8">8</div>
  <div class="item-9">9</div>
</div>

Как сделать, чтобы при наведении курсора на любую ячейку, она расширялась на весь ряд полностью?

Свободный перевод вопроса Why are only some of my CSS Grid boxes expanding when I hover over them? от участника @Myzel394.

1

1 ответ 1

3

Вот идея, где вы можете использовать отрицательный margin для создания эффекта перекрытия без изменения структуры и использования display: contents

.container {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(3, minmax(100px, auto));
  grid-template-rows: repeat(3, minmax(100px, auto));
}

[class^="item"] {
  text-align: center;
  box-sizing: border-box;
  padding: 10%;
  font-size: 5em;
  color: #0580d5;
  transition: .2s;
}

[class^="item"]:hover {
  z-index:2; /*we increase the z-index to cover the other*/
  background:
    /*we this to keep the initial background*/
    linear-gradient(rgba(40, 180, 240, .3),rgba(40, 180, 240, .3)),
    #fff;
}

[class^="item"]:nth-child(3n + 1):hover {
  margin-right:calc(-200% - 20px); /* we remove (2 x grid items + 2 x gap) */
}
[class^="item"]:nth-child(3n + 2):hover {
  margin-left:calc(-100% - 10px);
  margin-right:calc(-100% - 10px);
}
[class^="item"]:nth-child(3n + 3):hover {
  margin-left:calc(-200% - 20px);
}

.container>div {
  border: 2px solid #0580d5;
  background-color: rgba(40, 180, 240, .3);
  border-radius: 5px;
}

@media only screen and (min-width: 789px) {
  .container {
    grid-template-columns: repeat(3, 1fr);
  }
}
<div class="container">
  <div class="item-1">1</div>
  <div class="item-2">2</div>
  <div class="item-3">3</div>
  <div class="item-4">4</div>
  <div class="item-5">5</div>
  <div class="item-6">6</div>
  <div class="item-7">7</div>
  <div class="item-8">8</div>
  <div class="item-9">9</div>
</div>

Свободный перевод ответа от участника @Temani Afif.

3
  • при HOVER пропадают соседние элементы 1 мар 2019 в 15:15
  • @ПавелВаршавский а как должно быть? Разве из вопроса и ответа это было не понятно? Сейчас тогда напишу дополнение в вопрос 1 мар 2019 в 15:18
  • 2
    Интересно смотрится!
    – user262779
    1 мар 2019 в 22:08

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.