Jquery mouseenter 和 mouseleave 在 Next.js、Tailwind 中已弃用

Posted 2023-03-07

【中文标题】Jquery mouseenter 和 mouseleave 在 Next.js、Tailwind 中已弃用

【英文标题】：Jquery mouseenter and mouseleave is deprecated in Next.js, Tailwind

【发布时间】：2021-10-17 03:15:41

【问题描述】：

enter image description here

我想创建useEffect 变量并在用户悬停在父级div 上时将其设置为真/假。 我想在子 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>

【问题讨论】：

这里的问题是什么？你已经给出了一些你想要做什么的指示，但没有关于尝试这样做和你遇到的问题的问题说明

问题是，mouseenter 和 mouseleave 显示已被弃用，所以它不起作用

【参考方案1】：

您可以在没有悬停状态的情况下仅使用 CSS 来做到这一点。查看关于 group-hover classes here 的文档。他们是这样工作的：

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

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

附带说明：您通常不会在基于 React 的项目中使用 jQuery。如果你需要检测悬停，React 有内置的鼠标事件。阅读更多here。