I have set up links between different pages on my website. What I want is for the link that a visitor clicks on to change color once they've visited that page.
Unfortunately, this feature isn't working for me and I'm not sure why.
Here's an example of my code:
HTML:
<div id="pageLink">
<ul>
<li><a href="index.php" id="index"><div id="indexDiv">Welcome</div></a></li>
<li><a href="about-me.php" id="aboutMe"><div id="aboutMeDiv">Bio</div></a></li>
</ul>
</div>
CSS:
#index, #aboutMe {
text-decoration: none;
}
#index:visited, #aboutMe:visited {
color: red;
}
#indexDiv, #aboutMeDiv {
display: block;
text-decoration: none;
padding: 5px;
color: green;
font-family: Tahoma;
font-size: 20px;
}
#indexDiv:hover, #aboutMeDiv:hover {
color: gray;
}
#pageLink li{
display: inline-block;
list-style: none;
}
Check out the live demo here.