下一个 JS - <图像 />答案

【问题标题】：Next JS - <Image />下一个 JS - <图像 />
【发布时间】：2021-10-16 13:41:13
【问题描述】：

鼠标悬停时改变图像：

我有一个 png 图像，带有文本工程和另一张具有相同文本但样式不同的图片。

我需要悬停在这两张图片之间切换。

我用普通的

<Image src={engin} alt={'something'} onMouseOver={e => (e.currentTarget.src = 
engin_fill)} />

帮助真的很感激

【问题讨论】：

将图像包装在具有 onMouseOver 处理程序的 div 中，并使用状态变量设置 src。
我在最后做了这样的事情： const [hover, setHover] = useState(!false); const handleHover = () => setHover(!hover);

标签： next.js

【解决方案1】：

您可以在一些包装器中创建 2 个组件，然后在悬停时切换它们

<Wrapper onMouseOver={() => setHovered(true)}>
  {!hovered&&<Image1/>}
  {hovered&&<Image2/>}
</Wrapper>

【讨论】：

【解决方案2】：

您应该使用 Tailwind CSS。之后，代码将如下所示：

<Image src={engin} class="z-20 hover:z-0" />
<div class="z-10">Text</div>

例如-

  <div class="relative ">
<a class="absolute inset-0 z-10 bg-white text-center flex flex-col items-center justify-center opacity-0 hover:opacity-100 bg-opacity-90 duration-300">
  <h1  class=tracking-wider >Title</h1>
  <p  class="mx-auto">Description</p>
  </a>
<a href="#" class="relative">
    <div class="h-48 flex flex-wrap content-center">
        <img src="/image_url" class="mx-auto  " alt="">
    </div>
</a>

如何安装tailwind css：https://tailwindcss.com/docs/installation

【讨论】：