How to change the color of hyperlink after click it [closed]
This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
I want to change the color of the hyperlink after clicking on it, but remaining hyperlinks color are also changed..
CSS
HTML
2 Answers 2
The :visited pseudo-class works on the browser’s history. The fact that all three links are being drawn with the black colour means that your browser has visited them in the past. If you were to clear your history, or change the links’ urls, you’ll find that they aren’t classed as ‘visited’.
A link to Stack Overflow will probably show as visited in your browser, but a link to Voice of JIHAD probably shows up a different colour (unless you are a member of the Taliban). Clicking on the unvisited link will change its colour to the visited colour — as defined in Stack Overflow’s stylesheets — and will remain ‘visited’ as long as the page exists in your browser’s history.
I tried what you are saying but when i clicked on link the other link colors are also changed. that’s the problem..
and are all three links not in your browser history? if you changed the links to link1-changed.html, link2-changed.html, link3-changed.html, what is the outcome?
its not appropriate to clear the history every time.so can i know is it possible to get every time a fresh page without changing the color of hyperlink
Change selected link color using CSS?
I’ve defined a class (item1) for a set of objects. Is it possible to put red text color the object (from the class) that I click/select and put all the other objects (from the class) in black text color? Here’s is the code where I apply the class (item1):
Is it possible to put red text color the object (from the class) that I click/select? No. using javascript also — yes
We use this in our project’s and it will do trick for you unless you are using any third party libraries like bootstrap, check this also stackoverflow.com/questions/4866284/…
4 Answers 4
Is it possible to put red text color the object (from the class) that I click/select
OK some of the terms you’re using need a bit of clarity:
- On click in css is called :active
- On hover in css is called :hover
- After click in css is called :visited when talking about an a tag.
If you mean to actually set a link to an «active» state, you may have «symptoms» of that with the :visited selector, but it is by no means the way to do that.
the real way to do that is to physically add a class to your element that will identify it as active, i.e. and style that particular class accordingly (typically done with a sprinkling of javascript)
So, using javascript how do you add / remove that class?
Using javascript, you listen to click events. every time something is clicked, you do the following:
- remove the existing active class from whatever element currently holds it.
- add it to the item being clicked.
Don’t change link color when a link is clicked
The color of the link text is originally blue. When the link is clicked, the color of the link text changes to Red first, and then changes back to Blue. I want to the color of the link text not to change when user clicks on it. How can I make it happen? I tried
, because the original color of the link text can be some other than blue. Thanks. Edit: the page is displayed on iPhone browser, and I want to make a:active to keep the original link text color.
5 Answers 5
Links have several states you can alter. the way I remember them is LVHFA (Lord Vader’s Handle Formerly Anakin)
Each letter stands for a pseudo class: (Link,Visited,Hover,Focus,Active)
a:link < color:blue; >a:visited < color:purple; >a:hover < color:orange; >a:focus < color:green; >a:active
If you want the links to always be blue, just change all of them to blue. I would note though on a usability level, it would be nice if the mouse click caused the color to change a little bit (even if just a lighter/darker blue) to help indicate that the link was actually clicked (this is especially important in a touchscreen interface where you’re not always sure the click was actually registered)
If you have different types of links that you want to all have the same color when clicked, add a class to the links.
a.foo, a.foo:link, a.foo:visited, a.foo:hover, a.foo:focus, a.foo:active < color:green; >a.bar, a.bar:link, a.bar:visited, a.bar:hover, a.bar:focus, a.bar:active
It should be noted that not all browsers respect each of these options 😉
Change color of an anchor when clicked
Could you explain whether you want to change element’s text colour and do nothing more or maybe go to URL specified by href and have coloured link on that page?
4 Answers 4
The CSS declaration :active will accomplish what you’re after. http://www.w3schools.com/CSS/pr_pseudo_active.asp
a:active MUST come after a:hover in the CSS definition in order to be effective!
Here is the sample Css for the visited hyperlink
Some links? Give them a class, eg : a.foo:focus
One link? Give it an id, eg : a#bar:focus
a:focus is incorrect. The :focus pseudo-class adds special style to an element that has keyboard input focus. w3schools.com/CSS/pr_pseudo_focus.asp And the question is Change color of an anchor when clicked
@Haynes: :focus refers to caret focus, which is applied after the link becomes active ( :active is transitory). That is, the caret moves to the last-clicked position.
You can accomplish that at server-side with PHP or with JS.
With PHP all you need is to added a given classname to the link once clicked. a very simple example would be:
If you would like to do it with JS , and you are using any JS Framework just search the frameworks’ site for «How to add an event» & «How to add classname» then combine what you get to know from the search results.
If you are, by coincidence, using prototype.js framework, then you can try the following:
function selectLink(link) < link.addClassName('selected'); var otherLinks = link.siblings(); for(var i = 0; i < otherLinks.lenght; i++)< otherLinks[i].removeClassName('selected'); >> document.observe(‘dom:loaded’, function()< $('menu').observe('click', function(event)< event.stop(); var link = Event.element(event); selectLink(link); >); >); —