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);
}
Related
I have a base CSS that defines this:
a:hover, a:focus {
color: black;
}
I want to have a specific link that overrides and does not trigger focus, but still triggers hover.
How can i do something like this to override the color setting?
a:focus{
color: none;
}
I've tried color:transparent to no avail, focus still triggers.
Try This
a:hover{
color:green;
}
.class:hover, .class:focus {
color: red;
}
dsadsfdsfsd
dsadsfdsfsd
I think you might need like this. This will inherit the color from parent.
a:focus {
color: inherit !important;
}
Please apply this css.
a:hover { text-decoration: none !important; color :none; border: 0px; -moz-outline-style: none;}
a:focus { text-decoration: none !impoartant; outline: none;-moz-outline-style: none;}
You should use initial to set element style to default.
a:focus {
color: initial !important;
}
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'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;
}
I have css:
a:visited {
text-decoration: none;
color: #CCC;
}
a:hover {
text-decoration: underline;
color: #fff;
}
a:active {
text-decoration: none;
color: #CCC;
}
the hover does not work when i first load the webpage however when i click on the hyperlink then go back the hover then works. What is the issue.
Maybe there is some extra CSS hanging around somewhere... You could try resetting CSS at the beginning of your file:
a:visited, a:hover, a:active { text-decoration:none; }
Test your code at the seperate page of your project, I think it works, if it works, there is something else in your project that makes it incorrect, I mean external css
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/