我使用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获得悬停样式。
问题是,我的悬停状态没有被检测到我的标签,因为重叠的元素。我添加了一个z索引属性到我的.productpricelink类,我的状态变化被检测到,并按预期工作。