記事リストで a:visited リンクのスタイルを設定しようとしています。現在、これは CSS の色を a:visited リンクに適用することでうまく機能しますが、もう少し何かを求めています。訪問時に記事のタイトルの横に小さなドットを追加したいと思います。
私はいくつかの調査を行ったところ、a:visited リンクに色を適用する以外は機能しないように見えます (プライバシーの問題により、背景/背景画像のサポートが削除されました??)。ヒントやアイデア?jQuery?
プレーンな CSS ではなく、スクリプトを介してスタイルを設定する場合、jQuery は のような疑似クラス セレクターをサポートしていません:visited
。代わりにプレーンな JavaScript を使用する必要があります
$(document).ready(function()
{
$("#StyleAnchors").click(function()
{
//works
$("a").css("background-color", 'yellow');
//doesn't works
$("a:visited").css("background-color", 'red');
//works
document.styleSheets[0].addRule('a:visited', 'color: green');
//document.styleSheets[0].insertRule('a:visited{background-color: #00f;}');
});
});
これは機能します。私はそれを試したので、事実を知っています。Chrome では動作しないようですが、IE では動作するので、CSS の問題ではありません。
<style>
a:link
{
color: #f00;
}
a:visited
{
color: #0f0;
}
a:hover
{
color: #00f;
}
a:active
{
color: #ff0;
}
</style>
<a href="x" target="_blank">X</a>
IEでこれを試してください:
a:visited:before
{
content: ".";
}
これで十分でない場合は、リンクにある種のクリック イベントを追加し、そこからスタイルを設定する必要があります。
<a href="javascript:void(0)" onclick="$(this).html('.Link');">Link</a>
<span>
要素の後に要素を配置できます<a>
。この要素を非表示にします。そして、このようなcssセレクターをa:visited +span...このようなものにします。cssセレクターの詳細については、http://www.w3schools.com/cssref/css_selectors.aspにアクセス
してください。jqueryuには、親などのセレクターを備えたさらに多くのオプションがあります。
こんにちは、訪問したリンクをイメージできます。例えば、
a:visited {
padding-left: 14px;
background: url(images/checkmark.gif) left no-repeat;
}