In A:visited , Only One Change Is Working

Question

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:visitedimg {
        -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):

Baca Juga

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.

JavaScript Sample

In A:visited , Only One Change Is Working

Solution 1:

Solution 2:

Post a Comment for "In A:visited , Only One Change Is Working"