In A:visited , Only One Change Is Working

I want to change the color of the anchor tag and blur the image after visiting the link. but the only color is changing and the image looks the same. this is my CSS code

Solution 1:

add display:inline-block; to your a tag

  .image123{
      padding-left:80px;
   }

   .imgContainer{
      float:left;
      margin: 93px; 
    }

    a:link{
      color:#000;
      text-decoration:none;
    }

    a:visited { 
      color:#fafafc ;
      text-decoration:none;
      opacity:0.2 ;
      filter:alpha(opacity=60); 
     }

    a{
       display:inline-block; /* or block */
     }

Solution 2:

This should do the trick:

<style>
    a:visited img {
        -webkit-filter: blur(4px);
        filter: blur(4px);
    }
</style>

You can also read about filters here: https://developer.mozilla.org/en-US/docs/Web/CSS/filter

EDIT:

Went further in the exploration and as stated by @karthick nagarajan, browsers have stopped supporting anything else than the following properties (Source):

• color
• background-color
• border-color (and border-color for separate sides)
• outline color
• column-rule-color
• the color parts of fill and stroke

The previously given styles would work in any other situation than the :visited selector.

Also, as stated in this previous thread (How can I detect visited and unvisited links on a page?), it is not possible to retrieve the status of those links via Javascript, which make the given example impossible to fulfill given the current security specifications.

Share