CSS でロールオーバー その４
前回は、背景画像だけでなく文字も画像にしておまけに文字は見えなくしてしまおうということでしたが、今回はボタンの数だけ画像が必要になるので、その場合の CSS の書き方です。
同じ事は何度も書かない
今回は３つのボタンを作ってみます。
今回使うボタンはこれです。
３種類ありますが、やってる事は同じなので、違うとこだけ書き換えるようにしましょう。
HTML
<ul class="linktest_08 clearfix"> <li id="button_01"><a><em>Button 01</em></a></li> <li id="button_02"><a><em>Button 02</em></a></li> <li id="button_03"><a><em>Button 03</em></a></li> </ul>
CSS
/* TEST 08 */
ul.linktest_08 {
list-style-type: none;
margin: 0px;
padding: 0px;
}
ul.linktest_08 li {
float: left;
height: 30px;
width: 100px;
padding: 0px;
margin: 0px;
}
ul.linktest_08 li a {
background-repeat: no-repeat;
background-position: 0px 0px;
display: block;
height: 30px;
width: 100px;
}
ul.linktest_08 li a em {
display: none;
}
ul.linktest_08 li a:hover {
background-position: 0 -30px;
}
ul.linktest_08 li a:active {
background-position: 0 -60px;
}
ul.linktest_08 br {
clear: both;
}
ul.linktest_08 li#button_01 a {
background-image: url(img/roll_over_test_03_01.png);
}
ul.linktest_08 li#button_02 a {
background-image: url(img/roll_over_test_03_02.png);
}
ul.linktest_08 li#button_03 a {
background-image: url(img/roll_over_test_03_03.png);
}
.cliafix:after{
content: ".";
display: block;
height: 0;
font-size:0;
clear: both;
visibility:hidden;
}
.cliafix {display: inline-block;}
/* Hides from IE Mac */
* html .cliafix {height: 1%;}
.cliafix {display:block;}
/* End Hack */
前回のとの違いは、 <li> に id を加えたことと、background-image : を振り分けたことです。共通で使う background-image は無いので、ul.linktest_08 li a には背景画像の項目は入れていません。
また、 id じゃなくても、 class でも、何でもいいです。
他のものと、一緒じゃなければなんでもいいです。 id の場合にはそのページ内では１度しか使用することができませんので、複数使用する場合には class を使いましょう。
<li> じゃなくても <a> に付けても構いません。 <a> に付ける場合には、CSSの
ul.linktest_08 li#button_** a から、 a を外してください。 class の場合には、 # じゃなくて、 . になります。