aタグに用いる擬似要素として、挙げられるのが…
- :link 未訪問リンク
- :visited 訪問済みリンク
- :hover カーソルが重なった時
- :active クリックしてから離される時まで
擬似クラスはセレクタに続けて指定します。半角スペースを入れると無効になります。
擬似クラスには、優先順位があります。(上記の順番で！！)
HTML
<p><a href=”#”>リンクテキスト</a></p>
css
a:link {・・・
}
a:visited {・・・
}
a:hover {・・・
}
a:active {・・・
}
:visited擬似クラスは、ブラウザに履歴が残っていると、色を変更しても確認はできません。
実際の制作では:link、:activeは指定せず下記のようにa要素と:visitedと:hoverのみで指定するケースが多くなっているそうです。
:visitedを指定しない場合はa要素の指定と同じになります。
:hover擬似クラスはa要素以外にも使用できます。主にJavascriptというプログラムと併用して利用される場合があるそうです。
最後に今回参考にさせて頂いた、サイトに
aタグ内の画像の枠線について
aタグでimgタグを囲むと古いバージョンのブラウザでは1pxの青色のborderが付きます。これはブラウザのデフォルトcssでborderプロパティが設定されているためです。リセットCSSであらかじめimg要素のborderをなしに設定しておきます。
コメント