我有帶順風(fēng)的Next.js app。我想在懸停到產(chǎn)品卡時(shí)顯示一些附加信息，靈感來自wildberries.ru。它顯示其他產(chǎn)品的一些信息。我試著使用group，group:hover，但是絕對(duì)定位div的背景不起作用。如何像下圖那樣做呢？

產(chǎn)品組件:

const Product = (props) => {
  return (
    <div className='group rounded-md space-y-1 hover:bg-white hover:shadow-lg'>
      <div className='relative'>
        {/*Image*/}
        </div>

      <div className='flex flex-col'>
        {/*Price, name, rating*/}
        </div>

      <div className='z-10 hidden absolute group-hover:flex'>
        {/*Must be shown when hover, Add to cart button and sizes*/}
        </div>
    </div>
  );
};

export default Product;

但是絕對(duì)定位div的背景不起作用

您似乎沒有為絕對(duì)定位指定的背景& ltdiv & gt一點(diǎn)都不！考慮對(duì)其應(yīng)用一個(gè):

<div className='z-10 hidden absolute bg-white group-hover:flex'>

<script src="https://cdn.tailwindcss.com"></script>

<div class="grid grid-cols-2">
  <div class='group rounded-md space-y-1 hover:bg-white hover:shadow-lg'>
    <div class='relative'>
      {/*Image*/}
    </div>

    <div class='flex flex-col'>
      {/*Price, name, rating*/}
    </div>

    <div class='z-10 hidden absolute bg-white group-hover:flex'>
      {/*Must be shown when hover, Add to cart button and sizes*/}
    </div>
  </div>
  
  <div class='group rounded-md space-y-1 hover:bg-white hover:shadow-lg'>
    <div class='relative'>
      {/*Image*/}
    </div>

    <div class='flex flex-col'>
      {/*Price, name, rating*/}
    </div>

    <div class='z-10 hidden absolute bg-white group-hover:flex'>
      {/*Must be shown when hover, Add to cart button and sizes*/}
    </div>
  </div>
  
  <div class='group rounded-md space-y-1 hover:bg-white hover:shadow-lg'>
    <div class='relative'>
      {/*Image*/}
    </div>

    <div class='flex flex-col'>
      {/*Price, name, rating*/}
    </div>

    <div class='z-10 hidden absolute bg-white group-hover:flex'>
      {/*Must be shown when hover, Add to cart button and sizes*/}
    </div>
  </div>
  <div class='group rounded-md space-y-1 hover:bg-white hover:shadow-lg'>
    <div class='relative'>
      {/*Image*/}
    </div>

    <div class='flex flex-col'>
      {/*Price, name, rating*/}
    </div>

    <div class='z-10 hidden absolute bg-white group-hover:flex'>
      {/*Must be shown when hover, Add to cart button and sizes*/}
    </div>
  </div>