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: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):
- 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.
Post a Comment for "In A:visited , Only One Change Is Working"