如何用useState改变hidden 属性 onHover？

Question

我有一个卡片组件，想更改 div 上的 'hidden' 属性，当您将鼠标悬停在卡片上时，它充当叠加层。

我不确定在使用 useState 和 TailwindCSS 时如何更改 div 的 class 属性。我意识到我在代码中有“常量”，什么都不做，但我试图弄明白。

** 我正在使用 NextJS 和 TailwindCSS

import React from 'react'
import Image from 'next/Image'
import { useState } from 'react'

function TeamCard(props) {

    const [showOverlay, setshowOverlay]=useState(false);
    const hovering = () => setshowOverlay(true);
    const notHovering = () => setshowOverlay(false);


  return (
    <div>
        <div>
            <div className='flex flex-col my-5 relative '>

                {/* Main card content */}

                <div onMouseEnter={hovering} onMouseLeave={notHovering}>
                    <Image
                        src='/alex1.jpg'
                        width="350"
                        height="350"
                        objectFit='cover' 
                    />
                    <h2 className='text-xl my-2'>{props.fullName}</h2>
                    <p className='font-light'>{props.jobTitle}</p>
                    <p className='font-light'>{props.department}</p>
                </div>

                {/* Overlay */}
                
                <div className=' absolute top-0 bg-black w-full h-full space-between hidden'>
                    <div className='flex flex-col'>
                        <h2 className='text-xl my-2'>{props.fullName}</h2>
                        <p className='font-light'>{props.jobTitle}</p>
                        <p className='font-light'>{props.department}</p>
                    </div>
                    <div className='flex'>
                        <a href={props.linkedinUrl}>LINKEDIN</a>
                    </div>
                </div>
            </div>
        </div>

    </div>
  )
}

Answer 1

您可以尝试使用三元运算符。

showOverlay ? true(something you want to show) : false(show null);

...
 <div onMouseEnter={hovering} onMouseLeave={notHovering}>
                    <Image
                        src='/alex1.jpg'
                        width="350"
                        height="350"
                        objectFit='cover' 
                    />
                    <h2 className='text-xl my-2'>{props.fullName}</h2>
                    <p className='font-light'>{props.jobTitle}</p>
                    <p className='font-light'>{props.department}</p>
                </div>
{
         showOverlay ? 
                <div className=' absolute top-0 bg-black w-full h-full space-between hidden'>
                    <div className='flex flex-col'>
                        <h2 className='text-xl my-2'>{props.fullName}</h2>
                        <p className='font-light'>{props.jobTitle}</p>
                        <p className='font-light'>{props.department}</p>
                    </div>
                    <div className='flex'>
                        <a href={props.linkedinUrl}>LINKEDIN</a>
                    </div>
                </div>
                :
                null
...
}

如何用useState改变hidden 属性 onHover？

How to change hidden property onHover with useState?

reactjs

next.js

tailwind-css

use-state