只有最后一个React组件被应用了悬停样式

Question

我使用next.js和tailwindCSS样式，我做了一个自定义组件，其中有标签。当你将鼠标悬停在这些标签上时，它周围会出现一个框。问题是，当我把这些组件只有最后一个得到这个效果的一对夫妇。

* *"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;
}

我尝试改变.productpricelink中的文本颜色，看看是否只有一些组件受到该类的影响，但所有组件都改变了，所以这不是问题。我试着复制粘贴最后一个组件，但仍然只有最后一个tablelow获得悬停样式。

Answer 1

问题是，我的悬停状态没有被检测到我的标签，因为重叠的元素。我添加了一个z索引属性到我的.productpricelink类，我的状态变化被检测到，并按预期工作。