1

изображения

изображения

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

1 ответ 1

2

const items = [...list.querySelectorAll('li')]

list.addEventListener('focusin', (event) => {
  items.forEach((item) => item.style.setProperty('--scale', '100%'));
  items.forEach((item, index) => {
    if (item === event.target) {
      item.style.setProperty('--scale', '200%');

      if (items[index + 1]) {
        items[index + 1].style.setProperty('--scale', '150%');
      }

      if (items[index - 1]) {
        items[index - 1].style.setProperty('--scale', '150%');
      }
    }
  });
});

list.addEventListener('focusout', (event) => {
  items.forEach((item, index) => {
    item.style.setProperty('--scale', '100%');
  });
});

list.addEventListener('mouseover', (event) => event.target.focus());
ul {
  width: 200px;
}

li {
  margin: 1rem;
  transform-origin: 0 50%;
  transform: scale(var(--scale));
  transition: 0.2s;
}
<ul id="list">
  <li tabindex="0">Lorem 1</li>
  <li tabindex="0">Lorem 2</li>
  <li tabindex="0">Lorem 3</li>
  <li tabindex="0">Lorem 4</li>
  <li tabindex="0">Lorem 5</li>
  <li tabindex="0">Lorem 6</li>
  <li tabindex="0">Lorem 7</li>
  <li tabindex="0">Lorem 8</li>
</ul>

4
  • Идеально!! Еще стили добавить и будет прям топчик
    – Randall
    25 мар 2022 в 12:59
  • спосибо большое 26 мар 2022 в 10:27
  • а можно все это реализовать на react 26 мар 2022 в 14:31
  • можно конечно, не вижу никаких препятствий 26 мар 2022 в 19:49

Ваш ответ

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

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