2009年2月 9日

リストマークのロールオーバー

前回の投稿「リストのマークを画像に」でマウスオーバー時に三角矢印(リストマーク)の画像の差し替えについて少し触れました。
簡単なので、やってみました。
まず、矢印の色を深紅色に変えた画像を作り、後はテンプレート「スタイルシート(オリジナル)」を次のように修正しました(アンダーラインが修正部分)。ロールオーバー以外の、若干の調整も含まれています。
.side ul li {
      list-style-type: none;
}
.side ul li a {
      padding-left: 15px;
      background: url(images/arrow.gif) no-repeat 0 3px;
}
.side ul li a:hover {
      padding-left: 15px;
      background: url(images/arrow-red.gif) no-repeat 0 3px;
}      
.side li li a,.side li li a:hover {
      padding-left: 0;
      background:none;
}
ul#tags li a,ul#tags li a:hover {
      background: none;
      padding-left: 0;
      padding-right: 2px;
}

要するに、三角矢印の背景画像の指定をリストタグ<li>からアンカータグ<a>に変え、疑似クラスをセレクタにしてロールオーバーを実現させるという、初歩的なやり方です。

コメントする

ページの先頭に戻る