CODEWITHSUNDEEP
htmlcss
user11304947
user11304947

Reputation:

Change the color in A after clicking on it

I have a problem with the menu inside the header It made the color white for the text and everything looks fine. But after clicking on any link in the list, the text will turn blue. It is marked as if you previously clicked on it. How can I stop this command and return the text to its white color after returning to the home page. It always remains blue even after refreshing the page. And you must close the browser or change the link for the color to return to whit.

In the pictures you will find the problem. enter image description here enter image description here

.list ul{
    list-style-type: none;
    margin: 27px 0px;
}
.list li{
    display: inline;
    margin-right: 55px;
   
}
 .list a:link{
    font-size: 19px;
    text-decoration: none;
    padding: 27px 20px;
    color: #ffffff;
}
.list a:hover{
    background-color: #575757;
}
.list a:active{
    color: #ffffff;
    background-color: #323232;
}
/* gs*/
.list a.gs{
    border: solid 1px #ffffff;
    padding: 11px 20px;
    border-radius: 26px;
    font-size: 17px;
    
}
.list a.gs:hover{
    border: solid 1px #FFAC41;
    background-color: #FFAC41;
    color: #000000;
}
<div class="list">
    <ul>
      <li><a href="#">About</a></li>
      <li><a href="#">The prices</a></li>
      <li><a href="#" class="gs">Get Started</a></li>
    </ul>
  </div>

Upvotes: 0

Views: 132

Answers (2)

Alessio Cantarella
Alessio Cantarella

Reputation: 5201

You should add the :visited selector to your .list a:link property, e.g.:

.list ul {
  list-style-type: none;
  margin: 27px 0px;
}

.list li {
  display: inline;
  margin-right: 55px;
}

.list a:link,
.list a:visited {
  font-size: 19px;
  text-decoration: none;
  padding: 27px 20px;
  color: #ffffff;
}

.list a:hover {
  background-color: #575757;
}

.list a:active {
  color: #ffffff;
  background-color: #323232;
}


/* gs*/

.list a.gs {
  border: solid 1px #ffffff;
  padding: 11px 20px;
  border-radius: 26px;
  font-size: 17px;
}

.list a.gs:hover {
  border: solid 1px #FFAC41;
  background-color: #FFAC41;
  color: #000000;
}
<div class="list">
  <ul>
    <li><a href="#">About</a></li>
    <li><a href="#">The prices</a></li>
    <li><a href="#" class="gs">Get Started</a></li>
  </ul>
</div>

Upvotes: 0

Kaizen Programmer
Kaizen Programmer

Reputation: 3818

You want the :visited modifier

.list a:visited {
   color: #ffffff;
}

Source - https://www.w3schools.com/css/css_link.asp

The four links states are:

a:link - a normal, unvisited link

a:visited - a link the user has visited

a:hover - a link when the user mouses over it

a:active - a link the moment it is clicked

Upvotes: 1

Related Questions