Next.js+TailwindCSS自定义组件仅最后一个hover样式生效问题

使用Next.js和TailwindCSS开发时，我制作了包含<a>标签的自定义TableRow组件，期望鼠标悬停这些标签时显示背景色、圆角等样式效果。但当页面中放置多个该组件时，只有最后一个组件的<a>标签能触发hover效果。修改.productpricelink的常规样式（比如文本颜色）时所有组件都能正常响应，仅hover样式存在问题。

相关代码 #

index.js #

import TableRow from "@/components/TableRow";

export default function Home() {
  return (
    <>
      <TableRow imageurl="https://i.ibb.co/Gp1kWY0/Keeps.png" />
      <TableRow imageurl="https://i.ibb.co/NsK00Vx/Amazon-Pharmacy.png" />
      <TableRow brand="HappyHead" imageurl="https://i.ibb.co/hBffkXR/Happy-Head.png" />
      <TableRow imageurl="https://i.ibb.co/9r9xNZH/hims.png" />
      <div className="pb-24"></div>
    </>
  )
}

_app.js #

import 'tailwindcss/tailwind.css'
import '@/styles/fonts.css'

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />
}

TableRow.js #

import React from 'react';

const TableRow = (props) => {
  
  return (
    <div className="w-[1400px] h-[40px] pt-28 left-56 relative ">
      <div className="w-10/12 pb-4 items-center flex flex-row justify-between">
        <img src={props.imageurl} className="w-[130px] object-contain" alt="keeps" />
        <a className="relative text-center right-16 text-4xl text-blue-500 productpricelink" href={props.foamlink}>${props.foamPrice}</a>
        <a className="relative text-center right-10 text-4xl text-blue-500 productpricelink" href={props.solutionlink}>${props.solutionPrice}</a>
        <a className="relative text-center right-2 text-4xl text-blue-500 productpricelink" href={props.finlink}>${props.finPrice}</a>
      </div>
      <div className="h-[4px] bg-[#D9D9D9]"></div>
    </div>
  )
};

export default TableRow;

fonts.css #

.productpricelink {
    transition: all 0.3s;
    font-family: 'Montserrat', sans-serif;
  }
    
.productpricelink:hover {
  color: #ffffff;
  background-color: #2c3e50;
  text-decoration: none;
  font-weight: bold;
  padding: 5px;
  border-radius: 14px;
}

问题原因及解决方法 #

原因 #

问题出在TableRow组件外层div的定位样式上：每个TableRow都设置了relative、left-56和pt-28，这会导致所有组件都被定位到相同的区域，后面的组件会覆盖在前面的组件之上。鼠标看似悬停在前面的<a>标签上，实际是在后面组件的透明区域，所以只有最后一个组件的hover能被触发。

解决步骤 #

1. 统一控制布局边距：将原本加在每个TableRow上的pt-28、left-56移到父容器（Home组件）中，避免每个组件重复偏移导致重叠。
2. 移除错误定位样式：删除TableRow外层div的relative和固定高度h-[40px]，让组件自然排列，避免元素被挤压或覆盖。
3. 优化组件内容渲染：增加价格的条件渲染，避免未传递价格时显示$undefined的异常情况。

修改后的代码示例 #

修改后的TableRow.js

import React from 'react';

const TableRow = (props) => {
  
  return (
    <div className="w-[1400px] pb-6">
      <div className="w-10/12 pb-4 items-center flex flex-row justify-between">
        <img src={props.imageurl} className="w-[130px] object-contain" alt={props.brand || 'brand-logo'} />
        {props.foamPrice && <a className="text-center text-4xl text-blue-500 productpricelink" href={props.foamlink}>${props.foamPrice}</a>}
        {props.solutionPrice && <a className="text-center text-4xl text-blue-500 productpricelink" href={props.solutionlink}>${props.solutionPrice}</a>}
        {props.finPrice && <a className="text-center text-4xl text-blue-500 productpricelink" href={props.finlink}>${props.finPrice}</a>}
      </div>
      <div className="h-[4px] bg-[#D9D9D9]"></div>
    </div>
  )
};

export default TableRow;

修改后的index.js

import TableRow from "@/components/TableRow";

export default function Home() {
  return (
    <div className="pt-28 pl-56">
      <TableRow imageurl="https://i.ibb.co/Gp1kWY0/Keeps.png" />
      <TableRow imageurl="https://i.ibb.co/NsK00Vx/Amazon-Pharmacy.png" />
      <TableRow brand="HappyHead" imageurl="https://i.ibb.co/hBffkXR/Happy-Head.png" />
      <TableRow imageurl="https://i.ibb.co/9r9xNZH/hims.png" />
      <div className="pb-24"></div>
    </div>
  )
}

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