[英]How can I style :visited <a> elements that use React's onClick="" instead of href=""?
Since there is a lot of information, the user can get confused which links they followed and which they have not touched;由于信息量很大,用户可能会混淆他们关注了哪些链接,哪些链接没有触及; thus, I would like to mark with a different color when hovering over those links that the user has already visited.因此,当悬停在用户已经访问过的链接上时,我想用不同的颜色进行标记。
By default, my link color is black, and if you hover over the link, it lights up blue.默认情况下,我的链接颜色为黑色,如果您在链接上使用 hover,它会亮起蓝色。 I would like the links visited by the user to be highlighted in a different color.我希望用户访问的链接以不同的颜色突出显示。
Below is an example of how I write the route以下是我如何编写路线的示例
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>
);
}
Also my.css file还有我的.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;
}
Is it possible it's simply the ordering?有没有可能只是订购?
a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective. a:hover 必须在 CSS 定义中的 a:link 和 a: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;
}
Your problem can be solved by associating one more function that will change the color of the link when the user clicks on the link你的问题可以通过再关联一个 function 来解决,当用户点击链接时,它会改变链接的颜色
onclick = existing-function; changeColor() => {
document.this.style.color = "color";}
Use a semi-colon to separate the two functions.使用分号分隔两个函数。
There are two scenarios based on your question as you said " After clicking on the link and returning to the page, when you hover over the link, it still lights up blue "根据您所说的问题,有两种情况“单击链接并返回页面后,当您通过链接时 hover 仍然亮蓝色”
Do you want to preserve the clicked links in a single session?是否要将单击的链接保留在单个 session 中?
Do you want the visited links to persist across multiple sessions?您希望访问过的链接在多个会话中持续存在吗?
Hope this helps希望这可以帮助
If we want to use:visited CSS pseudo selector, basically we have to create browser history because visited pseudo selector depends on it.如果我们想使用:visited CSS 伪选择器,基本上我们必须创建浏览器历史记录,因为visited 伪选择器依赖于它。 Way to do it without creating real navigation with HTML anchor element is History API .无需使用 HTML 锚元素创建真正导航的方法是History API 。 To solve this issue, we have to add symbolic href to our link for pushing history states and preventing default HTML link navigation event behaviour.为了解决这个问题,我们必须在链接中添加符号 href 以推送历史状态并防止默认的 HTML 链接导航事件行为。
An appropriate example can be found on this code sandbox and sandbox preview可以在此代码沙箱和沙箱预览中找到适当的示例
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);
}
return (
<TableRow>
<TableCell>
<a href={`/user/${device.id}`} className="page-links" onClick={() => router(device.id)}>List of users</a>
</TableCell>
</TableRow>
)}
CSS: CSS:
a.page-links:hover:visited {
background-color: #dc2626;
color: white;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.