Показать элемент или текст при наведении в React

В веб-разработке эффекты наведения мыши являются важной частью взаимодействия с пользователем. React предоставляет нам простой способ реализовать эти эффекты с помощью встроенных обработчиков событий. В этом руководстве мы узнаем, как отображать элемент или текст при наведении курсора в React.

Шаг 1: Создайте компонент React

Первый шаг — создать компонент React, в котором мы будем реализовывать эффект наведения. Вы можете создать новый компонент, используя следующий код:

import React from 'react';

const HoverComponent = () => {
    return (
        <div>
            {/* Add your content here */}
        </div>
    );
};

export default HoverComponent;

Шаг 2: Добавьте состояние к компоненту

Чтобы реализовать эффект наведения, нам нужно добавить состояние к компоненту. Мы будем использовать хук useState для добавления логического значения, которое будет определять, должен ли элемент отображаться или нет. Добавьте в компонент следующий код:

import React, { useState } from 'react';

const HoverComponent = () => {
    const [isHovering, setIsHovering] = useState(false);

    return (
        <div
            onMouseEnter={() => setIsHovering(true)}
            onMouseLeave={() => setIsHovering(false)}
        >
            {/* Add your content here */}
        </div>
    );
};

export default HoverComponent;

Шаг 3: Условный рендеринг элемента

Теперь, когда мы добавили состояние к компоненту, мы можем условно визуализировать элемент в зависимости от того, находится ли мышь над компонентом или нет. Добавьте в компонент следующий код:

import React, { useState } from 'react';

const HoverComponent = () => {
    const [isHovering, setIsHovering] = useState(false);

    return (
        <div
            onMouseEnter={() => setIsHovering(true)}
            onMouseLeave={() => setIsHovering(false)}
        >
            {/* Add your content here */}
            {isHovering && (
                <div>
                    {/* Add the element or text that you want to show on hover */}
                </div>
            )}
        </div>
    );
};

export default HoverComponent;

Шаг 4: Стиль элемента

Наконец, вы можете стилизовать элемент, который будет отображаться при наведении, используя CSS. Добавьте в компонент следующий код:

import React, { useState } from 'react';

const HoverComponent = () => {
    const [isHovering, setIsHovering] = useState(false);

    return (
        <div
            onMouseEnter={() => setIsHovering(true)}
            onMouseLeave={() => setIsHovering(false)}
        >
            {/* Add your content here */}
            {isHovering && (
                <div style={{ backgroundColor: 'blue', color: 'white', padding: '10px' }}>
                    {/* Add the element or text that you want to show on hover */}
                </div>
            )}
        </div>
    );
};

export default HoverComponent;

Вот и все! Вы успешно реализовали эффект наведения в React. Вы можете настроить элемент или текст, отображаемый при наведении, и придать ему стиль в соответствии с вашими потребностями.