在:访问过,只有一个变化正在进行中

时间:2017-01-10 06:03:24

标签: javascript jquery html css

我想在访问链接后更改锚标记的颜色并模糊图像。但唯一的颜色是变化,图像看起来一样。 这是我的CSS代码

<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>

这是我的HTML部分

<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>

有谁能告诉我为什么我不能模糊图像并帮助我做同样的事情?

2 个答案:

答案 0 :(得分:0)

display:inline-block; 添加到您的标记

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

答案 1 :(得分:-1)

这应该可以解决问题:

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

您还可以在此处阅读有关过滤器的信息:https://developer.mozilla.org/en-US/docs/Web/CSS/filter

修改

进一步探索,正如@karthick nagarajan所述,浏览器已停止支持除以下属性之外的任何其他属性(Source):

  • 颜色
  • 背景颜色
  • border-color(和不同边的边框颜色)
  • 轮廓颜色
  • 列规则色
  • 填充和描边的颜色部分

以前给定的样式可以在除:visited选择器之外的任何其他情况下使用。

此外,如前一个帖子(How can I detect visited and unvisited links on a page?)所述,无法通过Javascript检索这些链接的状态,这使得给定的示例在当前安全规范下无法实现。