- 网站有一个表
- 在表中，我从Firestore获取数据(并将这些数据显示给用户(。表中的一些单元格可能链接到网站上的其他页面(这些页面也被实现为表(
由于有很多信息，用户可能会混淆他们关注了哪些链接，哪些链接没有接触；因此，当鼠标悬停在用户已经访问过的链接上时，我想用不同的颜色进行标记。
默认情况下，我的链接颜色是黑色，如果你将鼠标悬停在链接上，它会亮起蓝色。我希望用户访问的链接以不同的颜色突出显示。
下面是我如何编写路线的示例
export default function DeviceCell({ device }) {
const router = useNavigate()
return (
<TableRow>
<TableCell>
<a className="page-links" onClick={() => router(device.id)}>List of users</a>
</TableCell>
</TableRow>
);
}
还有我的.css文件
.page-links {
color: #3A3A3F;
text-decoration: none;
border-bottom: 1px black solid;
border-bottom-width: 2px;
cursor: pointer;
}
.page-links:hover {
color: #485FED;
border-bottom: 1px #485FED solid;
border-bottom-width: 2px;
}
根据您所说的问题，有两种场景">点击链接并返回页面后，当您将鼠标悬停在链接上时，它仍然会亮起蓝色">
是否要在单个会话中保留单击的链接？
- 如果是这样的话，那么你需要将你访问的链接存储在浏览器上的某个地方，比如cookie或localStorage或SessionStorage，并在渲染时对照列表进行检查。如果存在，请更改CSS，否则请使用不同的CSS
- 您还需要存储关于列表大小的逻辑。它应该有多大，在浏览器上可以存储多长时间(过期(
是否希望访问的链接在多个会话中持续存在？
- 如果是这样的话，那么您也需要服务器端的一些帮助。您需要一种机制来将状态存储在后端(存储可以是您的选择-NoSql数据库、SQL数据库等(，然后在呈现页面时对照列表检查特定用户
- 您需要一种识别用户的机制。如果他们登录了，这很容易，你可以使用他们的用户id。如果用户是匿名的，你可以创建一个cookie来识别用户，或者使用不同的机制来生成唯一的用户id
希望这能帮助
如果我们想使用：visited CSS伪选择器，基本上我们必须创建浏览器历史记录，因为visited伪选择器依赖于它。在不使用HTML锚元素创建真正导航的情况下，实现这一点的方法是history API。为了解决这个问题，我们必须在链接中添加符号href，以推送历史状态并防止默认的HTML链接导航事件行为。
一个合适的例子可以在这个代码沙箱和沙箱预览上找到
export default function DeviceCell({ device }) {
const router = useNavigate()
const handleClick = (e) => {
// Prevent default HTML Anchor Event
e.preventDefault();
window.history.pushState({ data: device.id }, `Data: ${device.id}`, e.target.href);
router(device.id)
}
return (
<TableRow>
<TableCell>
<a href={`/user/${device.id}`} className="page-links" onClick={handleCLick}>List of users</a>
</TableCell>
</TableRow>
)}
CSS：
a.page-links:hover:visited {
background-color: #dc2626;
color: white;
}
这可能只是排序吗？
a： 悬停必须在CSS定义中的一个：链接和一个：visited之后才能生效。
.page-links{
text-decoration: none;
border-bottom: 1px black solid;
border-bottom-width: 2px;
color: #3A3A3F;
cursor: pointer;
}
.page-links:visited {
color: red;
}
.page-links:hover{
color: #485FED;
border-bottom: 1px #485FED solid;
border-bottom-width: 2px;
}
a.page-links:visited:hover { color: red;}
应该有效。
您的问题可以通过关联另一个函数来解决，该函数将在用户点击链接时更改链接的颜色
onclick = existing-function; changeColor() => {
document.this.style.color = "color";}
使用分号分隔这两个函数。