A:Visited Links - Opacity Not Working

a:visited links - opacity not working

Not possible. You can only use the :visited selector to change the color of an element. Thus opacity doesn't work.

SEC7115

:visited and :link styles can only differ by color.

Reference here - Was unable to find W3 documentation stating it..

opacity a:visited

SEC7115: :visited and :link styles can only differ by color. Some styles were not applied to :visited.

This from IE's Developer Tools console. I'm pretty sure Firefox's shows a similar error.

Sorry. Not much can be done there.

a:visited links not following CSS rules

I finally found the solution to my own problem. I had initially copied elements of my CSS from an older project I was working on. Somehow, an "a:visted" declaration had ended up inline with an ID declaration and didn't break the CSS, but caused the links to not appear properly.

Possible to disable a:visited?

You can overwrite a:visited{...} with your own style. For example, if you want the link to stay red for unpublished visited links, then you do:

a.unpublished:visited{
    color:red;
}

If you just want the anchor color to stay the same as the anchor's parent element you can use inherit:

a:visited {
  color: inherit;
}

Opacity Off on a:hover and a:visited

Opacity is very simple to use in CSS. You can set the value of an object's opacity to any number from 0 to 1, with 1 being fully opaque and 0 being invisible.

Here is an example on how opacity could be used in CSS.

a {
    /*At a normal state, this link is halfway visible*/
    opacity: 0.5;
}

a:hover {
    /*When the mouse is hovering over this link, it is fully visible.*/
    opacity: 1;
}

a:active {
    /*While this link is being pressed, it is invisible.*/
    opacity: 0;
}

If you want to make sure that your link is fully visible when it is being hovered over by the mouse, you would do this:

a:hover {
    opacity: 1;
    color: #FF00FF;
}

---

Update

After rereading your code, I now realize that because all of your are h3's nested inside of links, you will need to set the opacity of the h3 rather than the link itself.

For example, if you want your links to have a full opacity when hovered you would use this code:

a > h3 {
    opacity: 0.5;
}

And...

a > h3:hover {
    opacity: 1;
}

What the ">" does is it only applies the style to the object that is a direct child of the parent object. In this case, "a > h3" means that this style will only apply to h3's that are directly nested inside of a link.

This way, only h3's that are nested inside of links will have their opacity changed.
For extra measure, I created a JSFiddle that gives an example of how that code would work. You can find that here.

Why won't my visited link have a background color?

The background-color on a:visited only seems to work (as Dave said above, in FF, Chrome and Safari) if the normal a has a background-color, either explicitly defined or through inherit (the direct parent must actually have a background-color for this to be true).

Obviously it is not ideal to have to define a background-color for a all the time, as the site may have a background image.

CSS bug..?

CSS link border style not working on a:visited

border-style is not something you can overide on the visited pseudo-class

From MDN

Note: For privacy reasons, browsers strictly limit the styles you can apply using an element selected by this pseudo-class: only color, background-color, border-color, border-bottom-color, border-left-color, border-right-color, border-top-color, outline-color, column-rule-color, fill and stroke. Note also that the alpha component will be ignored: the alpha component of the not-visited rule is used instead (except when the opacity is 0, in that case the whole color is ignored, and the one of the not-visited rule is used).

Also Privacy and the :visited selector

How to make visited links unvisited?

This is a problem with cascading styles in CSS, as stated here:

https://stackoverflow.com/a/1536822/3990818

a:hover must be placed after the a:link and a:visited rules

Unless this is done, a:visited will override a:hover.

You can also experiment with this at http://www.w3schools.com/cssref/tryit.asp?filename=trycss_sel_link_more1 by rearranging the different CSS rules, as an easy testing ground for this problem.

Why doesn't this a:visited css style work?

Actually, this has nothing to do with case sensitivity. This is a security feature. The functionality of :visited pseudoclass has been restricted in many modern browsers (Fx4, IE9, Chrome) to prevent CSS exploit: read about it here.

Nowadays, getComputedStyle() in these browsers usually returns values for visited links as if they weren't visited. However, I can simply imagine circumventing of that: using font-weight for visited links, the element's width changes so browsers that would allow changing font-weight for :visited links wouldn't actually fix the security hole.

You can see there are some specific things browsers do to protect against this:

• The window.getComputedStyle method, and similar functions such as element.querySelector, will always return values indicating that a user has never visited any of the links on a page.
• If you use a sibling selector such as :visited + span, the adjacent element (span in this example) will be styled as if the link were unvisited.
• In rare scenarios, if you're using nested link elements and the element being matched is different from the link whose presence in history is being tested, the element will be rendered as if the link were unvisited, as well.

Thus, there's no workaround for this issue.

---

Related Topics