web-dev-qa-db-ja.com

CSS-a：visited：hover？

すでにcolorであり、マウスによってvisitedされているハイパーリンクにのみ、フォントhoverを適用するにはどうすればよいですか？

基本的に、私がやりたいのは

a:visited:hover {color: red}
htmlcssstylesheet
23
TimG

はい、それは可能です。

次に例を示します。

<style type="text/css">
    a:link:hover {background-color:red}
    a:visited:hover {background-color:blue}
</style>

<a href="http://www.google.com/">foo</a><a href="http://invalid/">bar</a>
24
Gumbo

前述のように、これが正しく機能するためのcss宣言順序がありますが、この特定のオプションについては説明していませんが、違いはあります。これをChromeでテストしました。

注文は

    a:link { color: red; }
    a:visited { color: blue; }
    a:visited:hover { color: yellow; }
    a:hover { color: green; }
    a:active { color: gray; }

A：hoverとa：visited：hoverの両方がa：visitedの後、a：activeの前である限り、a：hoverの前でも後でも機能します。私は、訪問した2つのリンクを一緒に保ち、2つのホバーを一緒に保つことを好みます。

2
Harry The Mad Lurker

リンクcssの間にシーケンスがあります。a：hoverはa：linkとa：visitedの後に来る必要があり、a：activeはa：hoverの後に来る必要があります。詳細については以下のリンクを参照してください。

http://www.w3schools.com/css/css_pseudo_classes.asp

2
user3110896

FWIW、a:visited:hoverの背景を宣言せずに:link:hover（Chrome/FF）でcolorだけをスタイリングすることはできませんでした（noneまたはinherit以外は機能しているようです。アルファのためにrgba()を使用しました）。

これをChrome/FFで機能させるには：

a:visited:hover {
    color: #f00;
}

...（のような）これは存在する必要があります：

a:link:hover {
    background-color: rgba(255, 255, 255, 0);
}
0
Brandon Hill