Блог

У меня есть центрированные элементы внутри контейнера, и я хочу, чтобы наведенный элемент оставлял отступы, сохраняя при этом его положение. Возможно ли это?

Посмотрите, вот пример:

     body {
      font-size: 2em;
    }
    .container {
        text-align: center;
    }

    .item:hover {
      padding-left: 0.5em;
    }  

     <div class="container">
        <span class="item">Hello</span>
        <span class="item">my</span>
        <span class="item">wonderful</span>
        <span class="item">world</span>
    </div>  

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

Вы можете попробовать, как показано ниже, чтобы иметь оба пробела

 body {
  font-size: 2em;
}

.container {
  text-align: center;
  pointer-events:none;
}
.item {
  position:relative;
  left:0;
  transition:0.5s;
  pointer-events:initial;
}

/* previous elements: move to left */
.container:hover .item{
  left:-10px;
}
/* hovered element: don't move  */
.container .item:hover {
  left:0; 
}
/* next elements: move to right 
*/
.container .item:hover ~ *{
  left:10px;
}  

 <div class="container">
  <span class="item">Hello</span>
  <span class="item">my</span>
  <span class="item">wonderful</span>
  <span class="item">world</span>
</div>  

И только с оставленным пробелом:

 body {
  font-size: 2em;
}

.container {
  text-align: center;
  pointer-events:none;
}
.item {
  position:relative;
  left:0;
  transition:0.5s;
  pointer-events:initial;
}

.container:hover .item{
  left:-10px;
}

.container .item:hover,
.container .item:hover ~ *{
  left:0; 
}  

 <div class="container">
  <span class="item">Hello</span>
  <span class="item">my</span>
  <span class="item">wonderful</span>
  <span class="item">world</span>
</div>  

Или только правый пробел:

 body {
  font-size: 2em;
}

.container {
  text-align: center;
  pointer-events:none;
}
.item {
  position:relative;
  left:0;
  transition:0.5s;
  pointer-events:initial;
}

.container .item:hover ~ *{
  left:10px;
}  

 <div class="container">
  <span class="item">Hello</span>
  <span class="item">my</span>
  <span class="item">wonderful</span>
  <span class="item">world</span>
</div>  

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

Решение

 body {
  font-size: 2em;
}

.container {
  display: flex;
  justify-content: center;
}

.item {
  padding: 0 .2rem;
  transition: padding .2s;
}

.item:hover {
  padding: 0 .5em;
}
  

Объяснение

Используя flexbox, мы можем сделать все «промежутки» гибким элементом и выровнять их по центру с помощью содержимого выравнивания (используя значение «center») на родительском элементе. Единственная проблема при этом заключается в том, что мы теряем естественное пространство слева и справа от каждого текстового элемента, поэтому я добавил небольшое количество отступов в класс item .

После наведения курсора я успешно увеличил отступы влево и вправо.

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