Jquery mouseenter and mouseleave is deprecated in Next.js, Tailwind

Question

enter image description here

I wanted to create useEffect variables and put it to true/false when user hovers on parent div. I want to use that hover variable in a child div with image and resize image when user hovers on parent div with id="infoCard".

Code-

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

You could do this without the hover state with just CSS. Take a look at the documentation on group-hover classes here. They work like this:

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

Here's a minimal example of how you could do this. Note that you also need to extend the variants of the scale classes in the tailwind.config.js file as it's not included by default.

As a side note: You don't typically use jQuery in a React-based projects. If you need to detect hover, React has built-in mouse events. Read more here.