1

изображения

изображения

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

1 ответ 1

3

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
  • Идеально!! Еще стили добавить и будет прям топчик
    – Demon __
    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 that you have read and understand our privacy policy and code of conduct.

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