My Firefox is not showing the color for visited links:
a:link {
color: blue;
text-decoration: none;
}
a:visited {
color: green;
text-decoration: none;
}
a:hover {
color: cyan;
text-decoration: underline;
}
a:active {
color: yellow;
text-decoration: underline;
}
Test
The Link text is shown in blue, hitting it with the cursor changes to magenta, clicking it for a short time yellow - and after that blue again.
Where to find the problem?
Thank you.
It is related on the browser's chronic: This option must be activated, to see different colors! It's not really logical, as in an active session the pages visited can be seen by Menu > Chronic, even if that option is INactiv. Anyway, now it works!
Related
Is it possible to specify the hyperlink color within the main CSS properties statement like below? I have tried several variations and no luck.
width: 100%;
color: #FFF;
background-color: #693F18;
a.link-color: #fff;
There are several different ways to style a hyperlink: a for the link itself, along with the following pseudo-classes:
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 - a link the moment it is clicked
To change the colour, you're looking for the color property.
This can be seen in the following:
a {
color: cyan;
}
a:link {
color: blue;
}
a:visited {
color: red;
}
a:hover {
color: green;
}
a:active {
color: purple;
}
Link
I use Lightbox Plus. In Lightbox.min.css i have changed the the linkcolors:
.lightbox a{
color: #E74C3C;
}
.lightbox a:hover{
color:white;
}
.lightboxOverlay a:{
color: #E74C3C;
}
.lightboxOverlay a:hover{
color:white;
}
Problem:
This approach does not change the color of the link under the Lightbox-image. The linkcolor stays #44aaee.
I did a search for that color in the source-files. I can’t find these default.
How can i change the linkcolor? Pls help.
the link had 4four states
a:link - unvisited link
a:visited - visited link
a:hover - when mouses over
a:active - when clicked
for link you should a:link
.lightboxOverlay a:link{
color: red;
}
and for vidited a:visited
.lightboxOverlay a:visited{
color: yellow;
}
Problem with Chrome when displaying my css styles:
The horizontal nav should have background grey and
text color black but on Chrome get maroon and text white.
On I.E 9 works fine but on Chrome not.
The style for the second nav looks ok.How do I resolve these conflicting styles.
Here is my codepen:
http://cdpn.io/uCgyF
add the shiv to your head
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
Add id to the ul and style accordingly as in this fiddle
<ul id="firstNav">
nav #firstNav a:link,a:visited{
color: black;
background-color:grey;
display: block;
}
(skip to the bottom for tl;dr)
When I first loaded your pen, I saw things correctly. But then I clicked on one of the header links and saw the behavior you describe. That tells us that a :visited selector is probably the issue. Take a look at your css code (I removed some to help illustrate the point):
nav#navigation a:link, a:visited {
background-color:grey;
color: black;
}
aside a:link, a:visited {
background-color: maroon;
color: white;
}
the comma (,) doesn't do what you think it does. the comma in css is shorthand for writing the same definition twice, so if we didn't have that shorthand, your css would look like this:
nav#navigation a:link {
background-color:grey;
color: black;
}
a:visited { /* <-- oops! */
background-color:grey;
color: black;
}
aside a:link {
background-color: maroon;
color: white;
}
a:visited { /* <-- oops! */
background-color: maroon;
color: white;
}
with your css, every visited link on the entire site (whether it is in your nav or not) will be white on maroon.
as a general rule of thumb, add a new-line after each comma in css. It will help you see these errors more easily.
tl;dr: do this:
nav#navigation a:link,
nav#navigation a:visited {
background-color:grey;
color: black;
}
aside a:link,
aside a:visited {
background-color: maroon;
color: white;
}
Hi I'm trying to make a joomla site here, only one problem I can't seem to figure out. The color of my active link doesn't change, it has an image and a color, the image is in place as it should be, but the color doesn't change. Anyone an idea? here's the css:
a {
color: #ffffff;
text-decoration: none;
}
a:link, a:visited {color: #ffffff; text-decoration: none;}
a:focus, a:hover {
color: #e2231a;
text-decoration: none;
}
#links li.active {
color: #e2231a;
text-decoration: none;
background: url("../images/hover.png") bottom center no-repeat;
padding-bottom: 17px;
}
I know the active statement looks different then the rest, but this was the only way to get my image to show. Really stuck on this..
Used to this for a tag
#links li.active a {
// here style for your anchor link
}
If you want just the list elements within Links to change when active use this.
#links li:active a {color:#000;}
If you want all lists to be effected by this change use
li:active a {color:#000;}
If you want more than just the li elements to change ie ever single link on the site that is active to obey these rules then use the following
a:active {color:#000;}
Hope this helps you out.
I'm having an issue on my site http://noahsdad.com; if you look at the widget I installed at the very bottom, you can't see the links unless you hover over them. This doesn't just happen with this widget, almost any I put in have a 'haze' over them, if that makes sense.
I'm wondering if someone could help me figure out what's going on, and how to correct it.
Thanks.
The links are visible, they are just set to a light grey colour. You have these rules defined in your default.css file:
a:link, a:visited {
color: #EEEEEE;
}
a:hover {
color: #999999;
}
You could change the value of the standard link colour, or you create a new rule with a higher specitivity, so that only links in that widget are affected.
#dsq-combo-widget a {
color: #999;
}
Update
You haven't specified the color for your new style:
.widget ul li a:link, .widget ul li a:visited {
display: block;
text-decoration: none;
color: #999; <-- Add this
}
Only because of color you can't see it but it's visible. You have a predefined color (#EEE) for all of your "a:link, a:visited" at "http://yourdomain.com/wp-content/themes/ProPhoto_10/style.css" at line 3 and all links are inheriting that color so if you want to change the color for your widgets then add another color like
.widget ul li a:link, .widget ul li a:visited {
display: block;
text-decoration: none;
color: #333; /*or whatever you want*/
}
It's at line 345 in the same file.