设置padding top后hover效果失效？React+Tailwind问题问询

我在React项目中用Tailwind CSS给容器加了pt-30（对应padding-top:120px），之后发现hover效果不正常——鼠标悬停时本该显示的左右切换箭头出不来。请问这是hover和padding-top共同导致的问题吗？

原代码 #

'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;

原因分析与解决方案 #

不是hover和padding-top共同导致的问题，是两个独立的错误：

• Tailwind类名无效：Tailwind默认的padding类最大为pt-28（对应112px），pt-30是未定义的类，不会生成任何padding样式。要实现120px的顶部内边距，需用自定义值类名pt-[120px]。
• 拼写错误：箭头容器的courser-pointer是错误写法，正确类名为cursor-pointer，这个错误会导致鼠标悬停时无指针样式，也容易让你误以为hover逻辑失效。
• 定位偏差：箭头的top-[60%]配合-translate-y-[50%]会让箭头偏下，改成top-[50%]才能实现垂直居中。

修正后的代码 #

'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-[120px] 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-[50%] -translate-x-0 -translate-y-[50%] text-2xl rounded-full p-2 bg-black text-white cursor-pointer">
        <BsChevronCompactLeft/>
      </div>
      {/* Right Arrow */}
       <div  className="hidden group-hover:block absolute top-[50%] right-5 -translate-x-0 -translate-y-[50%] text-2xl rounded-full p-2 bg-black text-white cursor-pointer">
        <BsChevronCompactRight/>
       </div>
      </div>
  );
}

export default App;

总结 #

• 用pt-[120px]替代无效的pt-30实现顶部内边距
• 修正cursor-pointer的拼写错误
• 调整箭头垂直定位到容器中心

完成以上修改后，hover时箭头就能正常显示了。

内容的提问来源于stack exchange，提问作者Cherry