Как увеличить элемент, игнорируя все? - PullRequest
0 голосов
/ 12 марта 2020

У меня в основном есть код, и я хочу, чтобы при наведении на него элемент увеличивался и игнорировал весь его поток. Когда я говорю «игнорирование его потока», это происходит потому, что другие элементы (например, тег br) могут блокировать часть его содержимого.

It needs to be like this This problem can happen

Это похоже на галерею с изображениями.

Ответы [ 2 ]

2 голосов
/ 12 марта 2020

Вы можете использовать свойство css transform: scale(1.5) для увеличения элемента. И установите z-index увеличенного элемента выше, чтобы показать поверх всех элементов.

Рабочий пример:

.zoom {
  padding: 5px;
  background-color: green;
  transition: transform .1s;
  width: 20px;
  height: 20px;
  display: inline-block;
  margin-bottom: 2px;
  text-align: center;
  cursor: pointer;
}
.zoom:hover {
  -ms-transform: scale(1.5); /* IE 9 */
  -webkit-transform: scale(1.5); /* Safari 3-8 */
  transform: scale(1.5); 
  background-color: red;
  z-index: 1000;
}
<div class="zoom">1</div>
<div class="zoom">2</div>
<div class="zoom">3</div> <br>
<div class="zoom">4</div>
<div class="zoom">5</div>
<div class="zoom">6</div><br>
<div class="zoom">7</div>
<div class="zoom">8</div>
<div class="zoom">9</div>
1 голос
/ 12 марта 2020

Допустим, у основного контейнера ( не только элемент ) есть класс с именем container, просто добавьте это правило. Он будет применять более высокий z-index ко всему, что вы наводите, а не только к самому элементу, и это должно работать:

.container *:hover {
  z-index: 1;
}

Вот пример:

.container {
  width: 200px;
  counter-reset: box;
}

.row {
  display: flex;
}

.box {
  flex: 1;
  height: 60px;
  background-color: salmon;
  margin: 0px 2px;
  transition: all .5s;
  counter-increment: box;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box::after {
  content: counter(box);
  color: white;
  font-size: 1.5em;
}

.box:hover {
  transform: scale(1.5);
  background-color: steelblue;
}

.container *:hover {
  z-index: 1;
}
<div class="container">
  <div class="row">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  <hr>
  <div class="row">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  <hr>
  <div class="row">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...