Google chrome a：访问过的背景图像不起作用

发布于 2024-09-24 11:57:36 字数 1756 浏览 3 评论 0原文

（在开始之前我应该说是的，我已经完成了所有的愚蠢检查，是的，该链接在我的历史记录中并且已被访问过等）

我使用的是 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 而不是透明，并且访问的链接更改为红色，因此显然，背景颜色仅在为父级设置背景颜色时才有效。

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

原文

(before I start I should say yes, I have done all the stupidity checks, yes the link is in my history and has been visited etc)

I'm using Chrome version 6.0.472.63, although it's important that this works on all browsers.

It works on Firefox, IE and Opera.

Basically all i'm trying to do is change the background image of a link if the link has been visited.

I've done alot of trial and error testing so bear with me for multiple examples.

This is what I had originally

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

Works in every browser except Chrome. Next I tried just making it a colour rather than image.

.forum_box .title a:visited {
 background-color:red;
}

Same again, however I changed the link to #fff instead of transparent and the visited link changed red, so apparently the bg colour only works if you set a bg colour for the parent.

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

However it still doesn't solve my image problem. So in one final attempt I tried this in the hope that for some reason Chrome would only work when the same properties where present in both.

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

That didn't work either and again continued to work on Firefix, Opera and IE. So I come here to Stack Overflow very confused.

Any help would be greatly appreciated!

UPDATE:
I've attempted a jQuery solution, although it still doesn't work. Despite having :visited links and I can confirm their visited state by changing the font color to red. jQuery('a:visited').length returns 0.

分享到QQ

分享到微博