Щоб розкривний список з’являвся під час наведення вказівника миші на пункт у рядку меню, ви можете використовувати HTML і CSS. Ви можете встановіть контейнер, що випадає, прихованим за замовчуванням і використовуйте псевдоклас CSS ':hover', щоб показати контейнер під час наведення курсора на пункт меню.
Щоб створити спадне меню під час наведення курсора в React без використання будь-якого зовнішнього пакета, виконайте такі дії:
- Крок 1: Налаштуйте свій проект React.
- Крок 2: Створіть спадний компонент.
- Крок 3. Імпортуйте компонент Dropdown і обробіть подію.
- Крок 4: Додайте стиль.
Щоб додати ефект наведення до елементів списку в HTML, ви можете додайте властивість CSS :hover до елемента. Наприклад, у списку елементів <ul> наступне зробить усі елементи списку маючи світло-блакитний колір фону, коли миша на них наводиться.
Використання властивості display
- Цей підхід використовуватиме прослуховувачі подій і властивість відображення в JavaScript.
- mouseenter або прослуховувач подій mouseover використовуватимуться щоразу, коли курсор наводитиметься на елемент HTML.
- mouseleave або mouseout використовуватимуться кожного разу, коли курсор залишає елемент HTML.
- використовувати документ.
Крок 1. Додайте файли CSS і JavaScript Bootstrap у свій HTML-документ. Крок 2. Додайте спеціальне правило CSS, щоб увімкнути наведення курсора на спадне меню. Крок 3. Замініть код JavaScript Bootstrap за замовчуванням для розкривних меню на спеціальний сценарій, який запускає спадне меню при наведенні курсора.
відповідь: Використовуйте псевдоклас CSS :hover Якщо ви просто хочете показати або приховати спадне меню під час наведення курсора миші, вам не потрібен JavaScript. Ви можете зробити це просто за допомогою властивості CSS display і псевдокласу :hover.