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

<style>
   .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);
  }

</style>

here is my HTML part

<a href="breakdown_assistance_ins.php" id="ba" name="ba" >
    <img src="images/breakdwn_assiatance.png" style="height:100px; width:100px;"/>
    <p>Breakdown </p>
</a>

Can anyone tell me the reason why I couldn't blur the image and help me to do the same?

Are you the person who is down voting all the answers below? — Manjuboyz, Jan 10 '17 at 06:23

score 0 · Answer 1 · answered Jan 10 '17 at 07:08

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 */
     }

score -1 · Answer 2 · edited May 23 '17 at 12:01

-1

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.

edited May 23 '17 at 12:01

Community

1
1

answered Jan 10 '17 at 06:10

Marc-Antoine Parent

340
1
8

@siri Just edited my answer. By the way, the answers in this thread are not purposedly bad and you shouldn't give them negative reviews. People are trying to help and all provided CSS would do the trick in any other circumstance. – Marc-Antoine Parent Jan 10 '17 at 06:34
i'm not giving any negative reviews, i'm just informing them that the answer given by them is not helping me.I'm sorry if it seem like that. – siri Jan 10 '17 at 07:53
Alright, no problem then. But as explained in my edit, it will not be possible to achieve what you were asking for. Have a nice day! – Marc-Antoine Parent Jan 10 '17 at 15:39
is there any other way to change http://stackoverflow.com/users/7392929/marc-antoine-parentanchor tags without using a:visited ? @Marc – siri Jan 11 '17 at 09:54
There would definitely be some ways to style the styles, but if you want to style it only if the users has already visited the website (aka the website is anywhere in the browser history) I'm afraid it's not gonna be possible. There could be some javascript ways to think about this another way: a class could be added to the links if the user click on them (catch the click via Javascript, add the class and then let the page open), but it would not keep links in the visited style once the page reloads (unless you log clicked links to a cookie or to some user database). Hope it's gonna help! – Marc-Antoine Parent Jan 12 '17 at 06:54

In a:visited , only one change is working

2 Answers2

Linked