aqua+Css このページをアンテナに追加 RSSフィード

2005-07-23 Up Dateリンクにアクションを付ける

[]ダイナミック擬似クラス 14:34 ダイナミック擬似クラス - aqua+Css を含むブックマーク はてなブックマーク - ダイナミック擬似クラス - aqua+Css ダイナミック擬似クラス - aqua+Css のブックマークコメント

0002_list

a要素のヒット範囲を広げて、ダイナミック擬似クラスカーソルがロールオーバーした時のアクションを付けています。

やりかた

まず、a要素に対してCSSでdisplay:block:を指定して、インライン要素からブロック要素に変更してやります。

そして、widthやpaddingプロパティで、ブロック要素になったa要素のサイズを大きくしてやれば、その分ヒット範囲が広がります。

HTML Source

<dl class="rollover">
<dt>ダイナミック疑似クラスあり</dt>
<dd><a href="http://d.hatena.ne.jp/aquatail/">aqua+Log</a></dd>
<dd><a href="http://flash.g.hatena.ne.jp/aquatail/">aqua+Flash</a></dd>
</dl>

CSS Source

dl
{dl.rollover dd a
{
display: block;
width: 150;
padding: 4;
}

そしてダイナミック疑似クラスを下記の順で指定して、そのときの状態に応じてa要素の見た目を変化させています。

  1. link(まだ見ていないリンク)
  2. visited(すでに見たリンク)
  3. hover(マウスカーソルが上に重なっているリンク)
  4. active(押された状態のリンク)

CSS Source

/*まだ見ていないリンク*/
dl.rollover dd a:link
{
color: #2202ff;
border: 1px #4e64e0 dashed;
}
/*すでに見たリンク*/
dl.rollover dd a:visited
{
color: black;
border: 1px #d0caff dashed;
}
/*マウスカーソルが上に重なっているリンク*/
dl.rollover dd a:hover
{
color: blue;
background-color: #c6fec2;
border: 1px #4e64e0 solid;
}
/*押された状態のリンク*/
dl.rollover dd a:active
{
background-color: #c9c1ff;
border: 1px #4e64e0 solid;
}
補足aの親要素にliがある場合

a:hover時にbackgrandcolorを変えると、リストマーカーが消えてしまいます。

そこでa要素の背景にbackgrandimageでマーカー画像を設定してやります。

そうすれば、a要素のマーカー画像の下に backgrandcolorが表示されます。

MaggieMaggie2012/08/14 12:29It's great to read something that's both enjoyable and provides pragmatisdc soluitnos.

lcdjeodalcdjeoda2012/08/14 23:30TqJsb3 <a href="http://fevcpqslervb.com/">fevcpqslervb</a>

vaqwlpjyvaqwlpjy2012/08/16 19:03QRlgQb , [url=http://qtecpgccuxkm.com/]qtecpgccuxkm[/url], [link=http://yltvlzpczzke.com/]yltvlzpczzke[/link], http://moytjszxbfqz.com/

トラックバック - http://css.g.hatena.ne.jp/aquatail/20050723