CSS:-webkit-过滤器和过滤

问题描述:

之间的冲突我有一个使用图片的链接导航栏,如下所示:CSS:-webkit-过滤器和过滤

<nav> 
    <ul> 
    <li> 
     <a href="#link"> 
     <img src="img/link.png"> 
     </a> 
    </li> 
    </ul> 
</nav> 

要创建围绕未访问链接的光晕,我有以下的CSS:

nav a img { 
    -webkit-filter: drop-shadow(0px 0px 8px #fff); 
    -o-filter: drop-shadow(0px 0px 8px #fff); 
    -ms-filter: drop-shadow(0px 0px 8px #fff); 
    filter: drop-shadow(0px 0px 8px #fff); 
} 

nav a:visited img { 
    -webkit-filter: none; 
    -o-filter: none; 
    -ms-filter: none; 
    filter: none; 
} 

在Chrome中,该nav a img规则适用-webkit-filter: drop-shadow(0px 0px 8px #fff);nav a:visited img规则适用filter: none;,结果该链接已被访问之后也焕发仍然存在。

filter & -webkit-filter conflict

有什么我可以做这件事?

在Firefox上,nav a:visited img规则根本没有被确认。大概这是由于privacy concerns

有没有办法让未访问的链接图像发光,并访问的链接图像不发光?

+0

相关 - http://*.com/questions/34827812/styling-visited-links-belonging-to-a-class?answertab=votes#tab-top –

的唯一的属性:可以改变访问元素是:

颜色

背景色

边框颜色(及其子属性)

outline-颜色

填充和笔画属性的颜色部分

+0

你能解释一下吗? ;) –