主页 / user-621482

lukaschuk O's questions

Martin Hope
lukaschuk O
Asked: 2024-12-10 05:26:08 +0800 CST
  • 5

如何使箭头指向活动元素，以便当活动元素发生变化时，箭头移动到它

在此输入图像描述

export const GeolocationHead = () => {
const cities = ['Москва', 'Санкт-Петербург']; 
const [activeIndex, setActiveIndex] = useState<number>(0); 
const [hoverIndex, setHoverIndex] = useState<number | null>(null);

const handleMouseEnter = (index: number): void => {
    setHoverIndex(index); 
};

const handleMouseLeave = (): void => {
    setHoverIndex(null);
};

const handleButtonClick = (index: number): void => {
    setActiveIndex(index);
};

return (
    <div className={styles['geolocation__head']}>
        <div className={styles['geolocation__head-title']}>
            <p className={styles['geolocation__head-title--main']}>Работаем</p>
            <p className={styles['geolocation__head-title--sub']}>по всей стране</p>
        </div>

        <div className={styles['geolocation__head-button']}>
            <p>Выберите интересующий шоурум:</p>
            {cities.map((city, index) => {
                const isActive = activeIndex === index; 
                const isHovered = hoverIndex === index; 

                return (
                    <button
                        key={index}
                        className={`
                            ${styles['btn']} 
                            ${isHovered ? styles['hovered'] : ''} 
                            ${isActive && hoverIndex === null ? styles['active'] : ''}
                        `}
                        onClick={() => handleButtonClick(index)}
                        onMouseEnter={() => handleMouseEnter(index)} 
                        onMouseLeave={handleMouseLeave}
                    >
                        {city}
                    </button>
                );
            })}
        </div>
    </div>
);

};

export const GeolocationMap = () => {
return (
    <div className={styles['geolocation__map']}>
        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d577332.5658670563!2d36.726216496938264!3d55.58103355220319!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x46b54afc73d4b0c9%3A0x3d44d6cc5757cf4c!2z0JzQvtGB0LrQstCwLCDQoNC-0YHRltGP!5e0!3m2!1suk!2sua!4v1729377229655!5m2!1suk!2sua" width="600" height="450" style={{ border: 0 }} allowFullScreen loading="lazy" referrerPolicy="no-referrer-when-downgrade"></iframe>

        <div className={styles['geolocation__map-info']}>
            <div className={styles['geolocation__map-info-column']}>
                <p className={styles['geolocation__map-info-street']}><b>Москва <br /> ул. Тимирязевская, д. 1, стр. 2</b></p>
                <p className={styles['geolocation__map-info-phone']}><b>+7 (929) 590 82-87</b></p>
            </div>

            <div className={styles['geolocation__map-info-column']}>
                <div className={styles['geolocation__map-info-gmail']}>
                    <a href="">[email protected]</a> 
                    <p>По вопросам сотрудничества</p>               
                </div>

                <div className={styles['geolocation__map-info-social']}>
                    <p>Подписывайтесь на наши соц.сети:</p>

                    
                </div>
            </div>
        </div>
    </div>
);

};

.geolocation__map{
display: grid;
grid-template-columns: 1fr 1fr;
border: 1px solid #E2AE80;
border-radius: 30px;
padding: 40px;
html