CODEWITHSUNDEEP
css
Sunny
Sunny

Reputation: 2332

How to change link color when clicked?

:active changes the color but only while the user is still holding down the mouse.

for example:

black (click) > blue (release) > black

Instead, I need:

black (click) > blue (release) > blue

Is there a way to do this with CSS? Edit: I should mention that I don't want the browser to style visited links, so I can't use :visited.

Upvotes: 12

Views: 90031

Answers (4)

raam86
raam86

Reputation: 6871

In case you are not actually directing users to a new page and just want to change anchor color use javascript: first you have to Give your links a class like .changeable

then you can use javascript like this:

var links = document.getElementsByClassName('changeable');
function changeColorToRed(e) {
    e.target.style.color = e.target.style.color ? null : 'red';
}
for (var i = 0; i < links.length; i++) {
    links[i].addEventListener('click', changeColorToRed);
}

and the html:

<a class="changeable">Change me</a>

here a live example

Upvotes: 1

thgaskell
thgaskell

Reputation: 13226

You could use a combination of the tabindex attribute and :focus selector to your anchor elements.

http://jsfiddle.net/dcNzt/

HTML

<a href="#" tabindex="1">Stays blue</a>

CSS

a {   
    color: black;   
}

a:active {
    color: blue;
}

a[tabindex]:focus {
    color:blue;
    outline: none;
}

Upvotes: 16

Van Vu
Van Vu

Reputation: 303

http://www.w3schools.com/css/css_link.asp hope this help ^.^.

set visited/ unvisited color as the same.

<!DOCTYPE html>
<html>
<head>
<style>
a:link {color:#000000;}    /* unvisited link is black*/
a:visited {color:#000000;} /* visited link is black (reverse the color back to black)*/
a:hover {color:#0000FF;}   /* mouse over link (blue when mouse over)*/
a:active {color:#0000FF;}  /* selected link (blue in the split second which you loading the page.)*/
</style>
</head>

<body>
<p><b><a href="http://google.com">This is a link</a></b></p>
<p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS 
definition in order to be effective.</p>
<p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order 
to be effective.</p>
</body>
</html>

all of them should have blue color. As you you don't want browser to remember visited link I believe that will a much more complicated answer since U want to change the behavior of how browser should be working.

Upvotes: 5

bitfiddler
bitfiddler

Reputation: 2115

Use :visited to set the color of links that have been visited.

Upvotes: 20

Related Questions