Why the following styling of the link does not work ?
<html>
<head>
<style type="text/css">
a:link {color:#123456;} /* unvisited link */
</style>
</head>
<body>
Visit Google
</body>
</html>
Thanks !
For some general best practices, the link styling hierarchy works like this:
a:link {
color: #ff0000;
}
a:visited {
color: #ff0000;
}
a:hover {
color: #cccccc;
}
a:focus {
color: #cccccc;
}
a:active {
color: #cccccc;
}
It's best to always apply all of these, whether you do them singly as above or like this:
a:link, a:visited {
color: #ff0000;
}
a:hover, a:focus, a:active {
color: #cccccc;
}
But regardless, the order is very important and things can be overwritten if it isn't followed.
It's because the link has been visited.
Try
a {color: blue;} /* unvisited link */
a:visited {color: orange;} /* visited link*/
If you remove the last declaration links will be blue regardless of :visited.
And you shouldn't rely on it working in the future:
http://blog.mozilla.com/security/2010/03/31/plugging-the-css-history-leak/
Related
I have the following CSS:
.container a {
text-decoration: none;
font-weight: bold;
color: rgb(23, 230, 230);
}
.container a:hover {
text-decoration: underline;
color: white;
}
.container a:visited {
color: rgb(230, 0, 230);
}
And this html (piece of):
<div class="container">
...
<div class="menu">
<ul>
<li>
link1
</li>
<li>
link2
</li>
<li>
link3
</li>
</ul>
</div>
</div>
I don't understand why all the link options work, except for the color on hover: It does get underlined, but the color doesn't change. Does anyone know why?
When dealing with pseudo-classes on anchor elements, the order matters.
They must be in this order:
a:link
a:visited
a:hover
a:active
a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective! a:active MUST come after a:hover in the CSS definition in order to be effective!
source: http://www.w3schools.com/css/css_pseudo_classes.asp
There's a popular mnemonic you can use to remember this: LOVE HATE (lv ha).
For more details, see these references:
Why do anchor pseudo-classes a:link, :visited, :hover, :active need to be in correct order?
Why does .foo a:link, .foo a:visited {} selector override a:hover, a:active {} selector in CSS?
How To Remember The Order of Selectors: LOVE and HATE
jsfiddle link for everyone
.container a {
text-decoration: none;
font-weight: bold;
/* color: rgb(0, 230, 230); */
}
.container a:hover {
text-decoration: underline;
color: green;
}
/* .container a:visited {
color: rgb(2, 0, 230);/
} */
.test {
/* color: black; */
}
I loaded up your html and CSS into my sublime and it totally works fine. I toyed around with the colors a bit and everything is great. I loaded it up in fiddle to show you. When you have a list like you do, you want to target the list with some sort of class or ID to target them specifically. I commented some things out inside of the fiddle for you to see. enter code here
If you're finding your css is not taking not taking effect no matter what you do, it's worth adding !important parameters to tell the browser you designate your style attribute as having precedence.
.container a {
text-decoration:none !important;
font-weight: bold !important;
}
.container a:visited {
color: rgb(230, 0, 230) !important;
}
.container a:hover {
text-decoration:underline !important;
color: white !important;
}
Having said that, sometimes even with !important, still your style may be overridden. To unravel the CSS settings in the browser it's essential to use the inspector console. I think you may already be using the inspector, but if you want more info on this, please let me know.
I have two pre-defined classes (class-normal and class-on-select). A few li elements are making use of class-normal.
How do I make them use class-on-select only on focus/hover?
You can use :hover, :focus on same class to achieve these effects:
HTML:
<ul>
<li>Random li</li>
</ul>
CSS:
ul li {
color:black;
background:#BFBFBF;
border:1px solid #000;
/*css for class-normal*/
}
ul li:hover {
color:#fff;
background:#000;
border:1px solid #000;
/*css for class-on-select*/
}
Demo: http://jsfiddle.net/GCu2D/600/
class-normal:hover , class-normal:focus{
//your styling here
}
will do the trick.
You can try something like this:
/* unvisited link */
a:link {
color: #FF0000;
}
/* visited link */
a:visited {
color: #00FF00;
}
/* mouse over link */
a:hover {
color: #FF00FF;
}
/* selected link */
a:active {
color: #0000FF;
}
<p><b>Google</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>
JSFiddle Demo
I'm just starting to learn HTML and CSS and was testing out some simple CSS when strange things started happening.
Here is my CSS.
a:link {
color: blue;
text-decoration: none;
}
a:visited {
color: purple;
text-decoration: dotted;
}
a:hover {
color: blue;
text-decoration: dotted;
}
a:active {
color: blue;
text-decoration: dotted;
}
a:hover and a:active do not always do what they're supposed to. It's really confusing me because if I change the blue in a:hover's color: blue; to black it suddenly works.
I am editing the HTML and CSS files in Visual Studio 2012 and opening them in Google Chrome from the Dropbox folder they're saved in.
How can you differentiate between a:link and a:hover? Normally, it's a:link that's blue. Now, when you hover over it, it's a:hover that's also blue. Changing a:hover to black will let you see the difference.
A few things to consider:
In order for a:link to work you have to include a an actual link (href="somewebsite"). Otherwise you should be targeting just the a.
A lot of people think the active state is after you clicked on it thus making it "active" but it's on mousedown. Click the link and hold the mouse to see the :active triggered
In your example you have a:link AND a:hover set to blue so you will see no change when you hover over it.
text-decoration: dotted is not a property. You can choose from none, underline, overline, line-through, initial and inherit
EXAMPLE
a:link {
color: black;
text-decoration: none;
}
a:visited {
color: purple;
}
a:hover {
color: green;
text-decoration: underline;
}
a:active {
color: red;
text-decoration: line-through;
}
As stated, the link color only changes in Chrome (my default browser).
Here is the code I put in my external CSS file:
a:link {text-decoration: none;}
a:hover { color:darkgray; }
a:active { color:darkgray; } /* Don't underline links */
a:visited {color:darkgray;text-decoration: none;}
Any idea why this is happening?
Okay so I found the issue. While in chrome my text color also covers my links but as you can see I did not actually set the link color in a:link
still thank you all for the input
a:link {color: darkgray ;text-decoration: none ;}
a:hover { color: darkgray ; }
a:active { color: darkgray ; }
/* Don't underline links */
a:visited {color: darkgray ;text-decoration: none ;}
How can I apply a font color only to hyperlinks which have already been visited and are being hover by the mouse?
Essentially, what I want to do is
a:visited:hover {color: red}
Yes that is possible.
Here’s an example:
<style type="text/css">
a:link:hover {background-color:red}
a:visited:hover {background-color:blue}
</style>
foobar
There is a css declaration order for this to work properly as was mentioned earlier, although it didn't cover this particular option, it does make a difference. I've tested this on Chrome.
The order is
a:link { color: red; }
a:visited { color: blue; }
a:visited:hover { color: yellow; }
a:hover { color: green; }
a:active { color: gray; }
It will work whether it comes before or after a:hover as long as both a:hover and a:visited:hover are after a:visited and before a:active. I just prefer to keep the two visited links together and the two hovers together.
there is a sequence between link css to take effect..
a:hover must come after a:link and a:visited and a:active must come after a:hover
for more details refer below link..
http://www.w3schools.com/css/css_pseudo_classes.asp
FWIW, I was unable to style just color on a:visited:hover (Chrome/FF) without declaring a background for :link:hover (anything other than none or inherit seems to work, I used rgba() for alpha sake).
For this to work in Chrome/FF:
a:visited:hover {
color: #f00;
}
... (something like) this must be present:
a:link:hover {
background-color: rgba(255, 255, 255, 0);
}