我使用填充顶部120px。使用填充顶部悬停后不能正常工作。为什么会发生这种情况？下面是我的代码：

'use client';
// eslint-disable-next-line no-unused-vars
import React, { useState } from 'react';
// eslint-disable-next-line no-unused-vars
import {BsChevronCompactLeft , BsChevronCompactRight} from 'react-icons/bs';

function App() {
  // eslint-disable-next-line no-unused-vars
  const slides = [
    {
      url: 'https://images.unsplash.com/photo-1531297484001-80022131f5a1?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2620&q=80',
    },
    {
      url: 'https://images.unsplash.com/photo-1488590528505-98d2b5aba04b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2670&q=80',
    },
    {
      url: 'https://images.unsplash.com/photo-1661961112951-f2bfd1f253ce?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2672&q=80',
    },

    {
      url: 'https://images.unsplash.com/photo-1512756290469-ec264b7fbf87?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2253&q=80',
    },
    {
      url: 'https://images.unsplash.com/photo-1496181133206-80ce9b88a853?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2671&q=80',
    },
  ];

  return (
    <div className="h-[484px] w-full m-auto pt-30 relative group">
      <div style={{backgroundImage:`url(${slides[0].url}`}} className="w-full h-full bg-center bg-cover duration-500"></div>
      {/* Left Arrow */}
      <div className="hidden group-hover:block absolute top-[60%] -translate-x-0 -translate-y-[50%] text-2xl rounded-full p-2 bg-black text-white courser-pointer">
        <BsChevronCompactLeft/>
      </div>
      {/* Right Arrow */}
       <div  className="hidden group-hover:block absolute top-[60%] right-5 -translate-x-0 -translate-y-[50%] text-2xl rounded-full p-2 bg-black text-white courser-pointer">
        <BsChevronCompactRight/>
       </div>
      </div>
  );
}

export default App;

字符串
这是任何问题使用悬停和填充顶部不一起工作？