I have a button like so:
When I hover over it, it looks like this:
When I click on it, it'll take me to a new tab that shows my resume. However, when I come back, there's an underline that I'd like to remove:
And I can and did remove it because I styled the :focus part of the button:
.resume-button:focus {
text-decoration: none;
color: #FFFFFF;
}
The problem arises when the user tries to hover over the link again. It's not hovering anymore because the link is still "clicked"; hence when I hover, the color of the text "Resume" remains white and won't change color until I click somewhere else to reset the link. How can I reset the state of the <a> without clicking on some other part of the website?
Try active and visited state to cover all possibilities. Sometimes link stays active after using browser back button, and links may be marked as visited during normal web browsing.
a:active, a:visited {
color: #fff;
}
Link can have four states:
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 - link in the moment when clicked
These are the pseudoclasses and they should be declared in this specified order, because in a timeline they can happen only one after other.
People tend to think some shortcuts helpful in remembering the right sequence for example: LoVeHAte.
Use :active selector instead. :focus is selected thing, :active is pressed thing.
the one you're looking for is :visited
a:visited{ /*styles */}
Use the :link selector to style links to unvisited pages,
the :hover selector to style links when you mouse over them,
and the :active selector to style links when you click on them.
Related
How can I make a link be underlined that I am on at that moment. (This is in my navigation, so when I am actually visiting my "Home" or "About Us" page I want the link to be underlined, but only then. Is that possible to do with CSS? (Not JavaScript.) Thank you!
This sounds like more than just wanting to underline when the link is hovered over. Looks like the suggestion here was to add a CSS class onto each page for the link which is "the current page".
If you wanted your link to have the underline only when you hovered it. You should write something like this in your CSS:
a:hover {
text-decoration: underline;
}
This purely adds the underline when the anchor is hovered over.
If you wanted your link to have the underline appear after you clicked it, you should write something like this in your CSS:
a:active {
text-decoration: underline;
}
I'm trying to style a hyperlink's state when it's tapped on a mobile device. Basically it has to flicker a green color right after being tapped. I've tried all the CSS pseudoclasses for hyperlink states, including:
a:active
a:hover
a:focus
But on my iPhone, the hyperlink doesn't show the intended style when tapped. Is there a better way through CSS or jQuery to accomplish this?
You might need to use a hack along with :active
Try adding this event handler to the <body> tag:
<body ontouchstart="">
Reference
I just want the letters of the link to change color when user hovers on the link with their mouse.
Is this done by just using the a (for anchor) selector when selecting the element in css?
I don't want anything but the letters changing color.
https://jsfiddle.net/sa16pm5g/
I'm your link
a:hover {
color: black;
}
Insufficient information to give any other answer.
I want to change the color of a link when a user focuses on it by navigation to it using the TAB key.
that's the easy part, as it's done by this:
a:focus{ color: red; }
the problem is, the link is also colored red when activated, e.g: when a user clicks the "ENTER" key or the left mouse click.
How can I prevent this side effect and keep the coloring only when user focuses on the link using the "TAB" key ?
I tried this:
a:focus{ color: red; }
a:active{ color: blue; }
(blue is the default color)
it didn't work, what happens is it first turned the link blue but then red in a slit second...
I need this done of every link on my site so I don't want to use any complicated javascript code to do this and hoping to do this in CSS only.
any suggestions ?
edit: I also tried this:
a:active:focus{ color: blue; }
in order to capture a state in which the element is focused AND active so I can override a "focus" CSS.
it didn't work either.
The problem is the order of the rules.
a:link
a:visited
a:hover
a:active
a:focus
Focus has to be the last.
I tried and it works well.
Try using :visited pseudo class
a:visited{color:blue;}
I don't think you can do this in css only.
When you click a link, you give it focus.
You could try a little jquery routine to give all of your links a click handler which immediately blurs the focus away?
$(function () {
$('a').on('click', function() {
this.blur();
});
})
jsfiddle: https://jsfiddle.net/6sujjuvn/
In the fiddle, you can see that after it spawns the new tab/window, your clicked link back on the jsfiddle page no longer has focus
Have you tried:
a:active{ color: default; }
I made a page which is saved in this fiddle (original fiddle link).
Here I have set the color of the link in case of link,active,visited,hover. But after the first time, whenever I load the page in firefox, it always shows the color of visited i.e. pink. How can I reset the color as yellow i.e.the link color, that is shown the first time?
Also I could not understand how can I check if the blue color i.e. color of active is coming or not?
You have
A:visited {text-decoration: none;color: pink;}
So all of the visited links will be pink. If you want them to reset to yellow, you have to change that line to:
A:visited {text-decoration: none;color: yellow;}
Now it will always look like they've visited for the first time with the links.
Here's something I've learned over time: a and a:visited should always be the same; a:hover & a:active should always be the same.
Secondly: You may check your :active color by clicking the link and holding down the mouse button. Mousedown on the link, but don't let go of the button. You'll see it turn to your active color.
I think what you really want is the :focus psuedo-selector, not the :visited selector, since you don't want a durable (i.e., kept per page load) change. You want an in this instance change. :active only works for the duration of a mouse-click on a link.
See:
A:focus {
text-decoration: line-through;
color: pink;
}
http://jsfiddle.net/w4ByF/3/
And click on the first link. You'll see it take the :focus psuedo-selector.
Here the effect is a little easier to see:
http://jsfiddle.net/w4ByF/4/