How can I style :visited <a> elements that use React's onClick="" instead of hr-CodePudding

The website has a table.
In the table, I get data from the Firestore (and display this data to the user). Some cells in the table may link to other pages on the site (which are also implemented as a table).

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. 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

.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;
}

CodePudding user response：

a.page-links:visited:hover { color: red;} Should work.

CodePudding user response：

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.

.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;
}