CODEWITHSUNDEEP
javascriptjqueryhtmlcsshyperlink
blueberry pancake
blueberry pancake

Reputation: 123

How to set the last-clicked anchor to be a different color from all other links?

a:link {color:#FF0000} /* unvisited link */
a:visited {color:#00FF00} /* visited link */
a:hover {color:#FF00FF} /* mouse over link */
a:active {color:#0000FF} /* selected link */

The pseudo-classes (link, visited, hover, active) don't do exactly what I want which is to highlight the last-clicked link on a page to be a different color from all of the other links on the page.

Would this require JQuery and, if so, any suggestions?

Upvotes: 12

Views: 13915

Answers (3)

L777
L777

Reputation: 8477

You don't need Javascript. The CSS pseudo-class that you're looking for is 'focus'.

ps: it holds the 'last clicked' color only until you click on something else in the page.

a:link {color:#00FF00}
a:visited {color:#00FF00}
a:hover {color:#FF00FF}
a:focus {color:#0000FF} /* this one! */
<b>
<a href="javascript:void(0);">link 1</a>
<a href="javascript:void(0);">link 2</a>
<a href="javascript:void(0);">link 3</a>
<a href="javascript:void(0);">link 4</a>
</b>

There is a pure CSS hack to make the link hold the color even after the user click on other elements, using radio buttons with the labels as pseudo-links:

label {
  color: #00FF00;
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
  text-decoration: underline;
  font-weight: 800;
}

label:hover {
  color: #FF00FF;
}

input[type="radio"] {
  display: none;
}

input[type="radio"]:checked + label {
  color: #0000FF;
}
<input type="radio" name="menu" id="link1">
<label for="link1">link 1</label>

<input type="radio" name="menu" id="link2">
<label for="link2">link 2</label>

<input type="radio" name="menu" id="link3">
<label for="link3">link 3</label>

<input type="radio" name="menu" id="link4">
<label for="link4">link 4</label>

If you want to keep the link color after the user interact with other elements on the page without the CSS hack, you can use Javascript, adding a class to those links then adding an event listener:

document.addEventListener("click",
function(e) {       
e = e || window.event;
if (e.target.classList.contains('menulink')){
for (var i = 0; i < document.getElementsByClassName("menulink").length; i++ ) {
document.getElementsByClassName("menulink")[i].style.color='#00FF00';
}
e.target.style.color='#0000FF';
}
});
a:link { color: #00FF00; }
a:visited { color: #00FF00; }
a:hover { color: #FF00FF !important; }
<b>
<a href="#" class="menulink">link 1</a>
<a href="#" class="menulink">link 2</a>
<a href="#" class="menulink">link 3</a>
<a href="#" class="menulink">link 4</a>
</b>

In the above snippet, once a link is clicked, it reset the color of all links (painting it with green), then paints the clicked one with a different color.

Upvotes: 19

Adam A
Adam A

Reputation: 14618

You definitely can't do it with css.

With jQuery you could do something like

$("a").live("click", function() {
    $("a").removeClass("yourHighlightClass");
    $(this).addClass("yourHighlightClass");
});

Upvotes: 6

womp
womp

Reputation: 116977

It wouldn't require jQuery, but it's sure easy to do with jQuery.

$("a").click(function () { 
      $("a").css("color", "blue");
      $(this).css("color", "yellow");
    });

Upvotes: 13

Related Questions