(在我开始之前,我应该说是的,我已经做了所有的愚蠢检查,是的,该链接在我的历史记录中并且已经被访问过,等等)
我正在使用Chrome版本6.0.472.63,尽管在所有浏览器上都可以正常工作很重要。
它适用于Firefox,IE和Opera。
基本上,我想做的就是更改链接的背景图片(如果已访问该链接)。
我已经进行了大量的试验和错误测试,所以请多举几个例子。
这就是我原来的
```
.forum_box .title a { background-image:url(../images/f_unread.png); background-position:10px center; background-repeat:no-repeat; background-color:transparent; color:#2D4054; font-size:14px; padding:10px 12px 10px 44px; text-decoration:none; display:block; font-weight:bold; } .forum_box .title a:visited { background-image:url(../images/f_read.png); }
适用于除Chrome之外的所有浏览器。接下来,我尝试将其设置为彩色而不是图像。
.forum_box .title a:visited { background-color:red; }
同样,但是我将链接更改为#fff而不是透明,并且访问的链接更改为红色,因此显然bg颜色仅在为父级设置bg颜色时有效。
.forum_box .title a { background-image:url(../images/f_unread.png); background-position:10px center; background-repeat:no-repeat; background-color:#fff; color:#2D4054; font-size:14px; padding:10px 12px 10px 44px; text-decoration:none; display:block; font-weight:bold; } .forum_box .title a:visited { background-color:red; }
但是它仍然不能解决我的图像问题。因此,在最后一次尝试中,我尝试了这一操作,希望出于某种原因,Chrome仅在两者都具有相同属性时才起作用。
.forum_box .title a { background:#fff url(../images/f_unread.png) no-repeat 10px center; color:#2D4054; font-size:14px; padding:10px 12px 10px 44px; text-decoration:none; display:block; font-weight:bold; } .forum_box .title a:visited { background:#fff url(../images/f_read.png) no-repeat 10px center; } ```
那既不起作用,又继续在Firefix,Opera和IE上工作。所以我来到这里对Stack Overflow非常困惑。
任何帮助将不胜感激!
更新:我尝试了jQuery解决方案,尽管它仍然无法正常工作。尽管具有:visited链接,但我可以通过将字体颜色更改为红色来确认其访问状态。jQuery(’a:visited’)。length返回0。
这里同样的问题。在Firefox 3.6中更改a:visited上CSS Sprite的背景位置对我来说是有效的,但在Chrome 6中却不起作用。
但是可能很快它也会在Firefox中停止工作。(也许是FF 4?)
我认为唯一可行的解决方案是创造性地使用背景色而不是图像。