CSSに関するメモ【疑似リンク】

 

テキストにCSSで色を設定後、その中にリンクを置くと当然にリンクの色はリンク用の色になる。
このとき、カウンタを作っていたので、①～⑳までのカウンタに色を付けており、押したカウンタまで❶で表していた。
カウンタをクリックするとスクリプトを起動させるため<a>タグを使っていたが、上記の通りこれでは色が正しく表現できない。
そこで、こんなことをやってみたけど、クリックして文字列が入れ替わるとクリック色に戻ってしまう。

obj = document.getElementsByName("counter");
for (n=0;n<obj.length;n++) {
	obj[n].style.display = s;
}

タグ：<a href="javascript:changeCounter(0,1)" name="counter" class="counter">❶</a>

そこで、タグを変更してみた。これでスクリプトはいらなくなる。

タグ：<span onClick="javascript:changeCounter(0,1)" class="counter">❶</a>

あとはCSSの設定にこれを付け加えると、リンクっぽく見える。

span.counter:hover {
	cursor: pointer;
}