和mouseleave在Next.js，尾风中不受欢迎

Question

在这里输入图像描述

我想要创建useEffect变量，当用户在父div上徘徊时，将其设置为true/false。我希望在带有图像的子div中使用这个悬停变量，当用户在带有id="infoCard"的父div上悬停时调整图像的大小。

码-

const [hover, setHover] = useState(false);

<div
  className="flex flex-col md:flex-row font-inter py-7 px-2 border-b rounded-xl cursor-pointer hover:shadow-lg pr-6 transition duration-200 ease-out first:border-t hover:bg-red-100 mb-2"
  id="infoCard"
>
  <div className="relative h-40 w-64 md:h-52 md:w-80 flex-shrink-0 ml-6">
    <Image
      src={img}
      layout="fill"
      objectFit="cover"
      className={`rounded-2xl scale-95 ${hover ? "scale-100" : ""
        } transform transition duration-200 ease-out`}
    />
  </div>

  <div className="flex flex-col flex-grow pl-5 ml-2 mt-2 md:mt-0">
    <div className="flex justify-between">
      <p>
        {location} {city}
      </p>
      <HeartIcon className="h-7 cursor-pointer" />
    </div>

    <h4 className="text-xl">{title}</h4>

    <div className="border-b w-10 pt-2" />

    <p className="pt-2 text-sm text-gray-500 flex-grow">
      {numberOfGuest}
      {description}
    </p>

    <div className="flex justify-between items-end">
      <p className="flex items-center">
        <StarIcon className="h-5 text-red-400" />
        {star}
      </p>

      <div>
        <p className="text-lg pb-2 font-semibold lg:text-2xl">{price}</p>
        <p className="text-right font-light">{total}</p>
      </div>
    </div>
  </div>
</div>

Answer 1

您可以使用CSS不使用悬停状态来完成此操作。查看有关组悬停类这里的文档。他们是这样工作的：

<div class="group">
   <img class="transform scale-95 group-hover:scale-100" />
</div>

下面是是你如何做到这一点的一个最小的例子。请注意，您还需要扩展tailwind.config.js文件中比例类的变体，因为默认情况下它不包括在内。

顺便提一句:您通常不会在基于反应的项目中使用jQuery。如果你需要检测悬停，反应有内置鼠标事件.阅读更多的这里。