I was trying pseudo code for an anchor tag in css, i.e. link, visited, hover and active. The html is:
<a href="https://www.w3schools.com/html/" target="_blank">
w3school
</a>
and the css is:
a:link {
color: blue;
text-decoration: overline underline;
}
a:visited {
color: green;
text-decoration: line-through;
}
a:hover {
color: red;
text-decoration: underline;
}
a:active {
color: black;
text-decoration: overline;
}
After being visited, the text color is green which is correct. However, the text decoration is overline and underline, not line-through:visited is partially working. It seems that color is cascaded and text decoration not.
Could someone explain this?
Browsers these days limit what styles you can apply for the :visited state - because otherwise, checking for certain changes in layout via JavaScript allows to determine whether you visited an external URL already.
https://developer.mozilla.org/en-US/docs/Web/CSS/:visited#Styling_restrictions:
Styling restrictions
For privacy reasons, browsers strictly limit which styles you can apply using this pseudo-class, and how they can be used:
Allowable CSS properties are color, background-color, border-color, border-bottom-color, border-left-color, border-right-color, border-top-color, column-rule-color, and outline-color.
https://developer.mozilla.org/en-US/docs/Web/CSS/Privacy_and_the_:visited_selector:
Before about 2010, the CSS :visited selector allowed websites to uncover a user's browsing history and figure out what sites the user had visited. This was done through window.getComputedStyle and other techniques. This process was quick to execute, and made it possible not only to determine where the user had been on the web, but could also be used to guess a lot of information about the user's identity.
Related
I have an 'a' tag that is a normal link to another webpage.
I want to disable the default link appearance unless the mouse cursor is hovering over the link, when the default normal link appearance should be restored.
This is what I have tried so far:
(HTML)
example
(CSS)
a {
color: #000;
text-decoration: none;
}
a:hover {
color: unset;
text-decoration: underline;
}
JS fiddle example of that code here
The problem is that during the mouse hover the link color remains black, and does not unset or restore to the original link blue. Is there a special CSS keyword for "original setting" or something like that?
The value for original setting you're looking for is called initial.
a:hover {
color: initial
}
However, that might make the link black. Which means it wouldn't work for you in this case. You can get around this another way though, through your a style. Use the inverse of :hover using the :not selector.
a:not(:hover){
color: #000;
text-decoration: none;
}
Hi, I'm Link.
The way it works is applying the style to your link, as long as it's not the hover effect. a alone would style the :hover too, which we don't want.
Or if that doesn't work in your environment, you could style the link with the default colors:
a { color: #000; text-decoration: none; }
a:hover {color: #0000EE; text-decoration: underline; }
Hi, I'm Link.
That should work everywhere, as it's a regular color change. However, do note that the default color might slightly vary browser to browser... the perk of this is that the color stays the same across all browsers, I guess.
The difference between the middle and last piece of code is that the middle one uses the default browser settings, while the last one pushes in your own blue.
I want to create a hyperlink that doesn't change the text when I hover over it.
I've created a special style for that type of link as follows:
a.blank:hover{
text-decoration:none;}
and the link itself:
<a class="blank" id="asdf">asdf</a>
I also have a general hyperlink style:
a:hover, a:active {
text-decoration: none;
color: #321dd3; }
I know I could get around it by defining the text colour as being the same, but is there an umbrella method to force the hyperlink not to change anything?
There are libraries such as reset.css (And more like it) that will remove these styles, but that may affect other parts of your page. It's best to use
a:hover, a:active {
text-decoration: none;
color: inherit;
}
You will also need to add a{text-decoration: none;} and define the color property (That's what's inherited) for its parent element.
Fiddle: http://jsfiddle.net/VhCf8/
It seems the following variants produce identical results:
/* 1 */
a, a:visited, a:active { color: black; }
a:hover { color: red; }
/* 2 */
a, a:link, a:visited, a:active { color: black; }
a:hover { color: red; }
/* 3 */
a:link, a:visited, a:active { color: black; }
a:hover { color: red; }
Most guidance on the web uses 2 or 3. Why not go for the simplest variant which is 1? I cannot find a good reason to ever apply :link if all you need is one style for normal links and one for hover.
Is it best-practice to not use :link? Why or why not?
I don't care whether the link is visited or not. Both receive the same style. I only care about hover or not hover. This question is not about what the variants do - all do the same thing. It is about what the best variant is. Is one of the variants faulty? Which one is best-practice?
Because not every a is a link.
<a name="table_of_contents">Table of Contents</a>
isn't a link, it's an anchor that can be linked to with <a href="#table_of_contents">.
a will match it, a:link won't.
It is used to differentiate between simple anchors and anchors with href attributes. See demo jsfiddle here.
<style>
a { color: red; }
a:link { color: blue; }
</style>
<a name="anchor">No href</a><br />
With href
EDIT:
For this reason, it is important to cover all cases in your CSS. Option 2 is the only option that completely covers all cases. If you do not have anchor elements without href attributes, you are safe with option 1.
a:link is specifically for links that have not been visited. a applies to all <a> elements.as you said
I don't care whether the link is visited or not
then you may avoid the use of a:link ...use of only a...a:hover...a:active will satisfy your need
and also a:link wont work if there is no href in your anchor but a will do
I suppose you can use
<a>
to create a button so that could produce alternate results...
I always use a:link
It solely depends on your intention, so for your example, I would simply style all anchor elements one color and only change the style when the element is hovered.
a {color: #000;}
a:hover {color: #f00;}
In your case, you are only changing the color of the link when it's hovered. You need to add the hover pseudo element after the base rule otherwise it would be overridden due to the cascading of the style sheet.
If you were to use all of the psuedo elements in this case and you wanted the only difference to be the hover it would look like this:
a:link, a:visited, a:focus, a:active {color: #000;}
a:hover {color: #f00;}
The pseudo-class names are self explanatory:
:link - any unvisited link
:visited - any visited link
:active - when the link is active, e.g. when it's clicked or activated with a keyboard event
:focus - when the link gains focus, e.g. when a user tabs through the elements and it is the selected element
:hover - when it's hovered or moused over
The benefit of using a pseudo-class is that it will have a higher specificity than just targeting the anchor element. However, in your case it may not be needed.
I'm trying to create my website so you can tell where you are just by the colour of the elements in each div. The website is only one page and I'm using jQuery to slide out sections of the website when you click to open that section (As opposed to having seperate .html's).
To show them which section they have open I'm making all links in each section the same colour as the text that opens that section. However I also want to have<a> </a> tags which aren't links to add a bit of colour to the site and to attract viewers to key bits of information. For this reason I want to only apply link effects to <a> </a> tags which are actually links... So I've tried this:
#box1 a{
color: #68cff2;
}
#box1 a:link:hover{
color: #ffffff;
background-color: #68cff2;
}
This works for the background-color as in it only changes the background colour for <a> </a>'s that have a href="..." but it doesn't change the color of the font for such links... is there any way to sort this?
The :link pseudo-class only applies to unvisited links, as opposed to all links. Remember that you have visited links to account for as well. You may need to repeat the selector for visited links, as I notice that you haven't done so:
#box1 a:link:hover, #box1 a:visited:hover {
color: #ffffff;
background-color: #68cff2;
}
(or just use #box1 a[href]:hover instead, more info)
I should add, though, that you shouldn't be using <a> tags to mark up things that aren't links and don't serve as anchors either, just to "add a bit of colour to the site and to attract viewers to key bits of information". That's not what they're designed for. A more semantic alternative would be something like <em> or <strong>, though of course you have to remove the italic or bold style if you don't want it:
#box1 a, #box1 em {
font-style: normal;
color: #68cff2;
}
#box1 a:hover{
color: #ffffff;
background-color: #68cff2;
}
Then you won't need to specify the :link and :visited pseudo-classes, since you can basically guarantee that all your remaining <a> elements are links.
Is there a need for a:link:hover{}? Just try using a:hover {}
a:hover will also affect the anchor tags, which can be confusing to end-users if they behave in the same way as links.
I have to disable the color change of an anchor tag when visited. I did this:
a:visited{ color: gray }
(The link is gray in color before visited.) But this is a way where I explicitly state the color after the link is visited, which is again a color change.
How can I disable the color change of an anchor tag when visited without doing any explicit color changes?
If you just want the anchor color to stay the same as the anchor's parent element you can leverage inherit:
a, a:visited, a:hover, a:active {
color: inherit;
}
Notice there is no need to repeat the rule for each selector; just use a comma separated list of selectors (order matters for anchor pseudo elements). Also, you can apply the pseudo selectors to a class if you want to selectively disable the special anchor colors:
.special-link, .special-link:visited, .special-link:hover, .special-link:active {
color: inherit;
}
Your question only asks about the visited state, but I assumed you meant all of the states. You can remove the other selectors if you want to allow color changes on all but visited.
You can't. You can only style the visited state.
For other people who find this, make sure that you have them in the right order:
a {color:#FF0000;} /* Unvisited link */
a:visited {color:#00FF00;} /* Visited link */
a:hover {color:#FF00FF;} /* Mouse over link */
a:active {color:#0000FF;} /* Selected link */
For :hover to override :visited, and to make sure :visited is the same as the initial color, :hover must come after :visited.
So if you want to disable the color change, a:visited must come before a:hover. Like this:
a { color: gray; }
a:visited { color: orange; }
a:hover { color: red; }
To disable :visited change you would style it with non-pseudo class:
a, a:visited { color: gray; }
a:hover { color: red; }
It’s possible to use the LinkText system color value from the CSS 4 Color Module to obtain the browser default value if one wishes to defer to that.
a:visited { color: LinkText; }
link
However note:
These values may also be used in other contexts, but are not widely supported by browsers.
It at least appears to work in Firefox 98 and Chromium 99.
If you use some pre-processor like SASS, you can use #extend feature:
a:visited {
#extend a;
}
As a result you will see automatically-added a:visited selector for every style with a selector, so be carefully with it, because your style-table may be increase in size very much.
As a compromise you can add #extend only in those block wich you really need.
For those who are dynamically applying classes (i.e. active):
Simply add a "div" tag inside the "a" tag with an href attribute:
<a href='your-link'>
<div>
<span>your link name</span>
</div>
</a>
Either delete the selector or set it to the same color as your text appears normally.
You can solve this issue by calling a:link and a:visited selectors together. And follow it with a:hover selector.
a:link, a:visited
{color: gray;}
a:hover
{color: skyblue;}
I think if I set a color for a:visited it is not good: you must know the default color of tag a and every time synchronize it with a:visited.
I don't want know about the default color (it can be set in common.css of your application, or you can using outside styles).
I think it's nice solution:
HTML:
<body>
<a class="absolute">Test of URL</a>
<a class="unvisited absolute" target="_blank" href="google.ru">Test of URL</a>
</body>
CSS:
.absolute{
position: absolute;
}
a.unvisited, a.unvisited:visited, a.unvisited:active{
text-decoration: none;
color: transparent;
}
a {
color: orange !important;
}
!important has the effect that the property in question cannot be overridden unless another !important is used. It is generally considered bad practice to use !important unless absolutely necessary; however, I can't think of any other way of ‘disabling’ :visited using CSS only.
Use:
a:visited {
text-decoration: none;
}
But it will only affect links that haven't been clicked on yet.