Реакция и попутный ветер: эффект наведения на одну карту заставляет обе карты расширяться, даже если у них есть независи ⇐ CSS

[Anonymous]

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

Код: Выделить всё

import React, { useState } from "react";
import card1 from "../assets/Logos/card1.gif";
import card2 from "../assets/Logos/card2.gif";

const Demo = () => {
// Independent hover states for each card
const [isHoveredCard1, setIsHoveredCard1] = useState(false);
const [isHoveredCard2, setIsHoveredCard2] = useState(false);

return (

{/* Card 1 */}
 setIsHoveredCard1(true)}
onMouseLeave={() => setIsHoveredCard1(false)}
>
[img]{card1} alt=[/img]

Creativity With Purpose:



We bring ideas to life, crafting innovative and meaningful
narratives that resonate with your audience.



{/* Card 2 */}
className="bg-black px-6 py-10 rounded-3xl flex flex-col justify-center transition-all duration-500 ease-in-out"
onMouseEnter={() => setIsHoveredCard2(true)}
onMouseLeave={() => setIsHoveredCard2(false)}
>
[img]{card2} alt=[/img]

Client-Service Focused:



Your vision is our mission. We partner with you to create strategies
that elevate your brand.



);
};

export default Demo;

Вы можете найти выходное изображение по этой ссылке: https://www.filemail.com/d/guqzjuttbyuvzvu

Подробнее здесь: https://stackoverflow.com/questions/793 ... and-even-t