;

訪問済みリンクの表示を画像でやりたい

2009/12/08 0 コメント

いくつかやり方はあるようだが、CSSでやりた~い。

f:id:wwweb:20091208172510p:image:left

で、ロールオーバー用の画像と訪問済みのボタン3つを1つの画像につくり、Y座標をずらすことでそれぞれを表示させることに。

リストを横並びにして、頭につくマークをはずし、

ul {

    list-style-type:none;

}

文字そのものは X座標をマイナスにして表示をはずす、と。

li a {

padding-left:25px;

line-height:180%;

background:URL(mark.png) no-repeat;

text-decoration:none;

float:left;

width:200px;

text-indent:-1000em;

}

で、マウスが画像の上にきたら Y座標をマイナスに

li a:hover {

color:#f33;

background-position:0 -30px;

}

そして、訪問済みなら、もっとマイナスに、と

li a:visited {

background-position:0 -60px;

}

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です