Web Artisan Blog - ウェブ アルチザン ブログ

a:hoverを使う事で、
「アンカーの上にマウスを乗せた時に、アンカーの色などの属性を動的に変化させる」
という動きを、Javascriptを使用せずに実現する事が出来る。

下記は、当サイト”Categories”部のCSS定義。

#sidebar-a a {
font-weight : normal;
font-size : 90%;
display : block;
color : #ffffff;
text-decoration : none;
padding : 4px 3px;
margin : 0 0 2px;
border : 1px solid #800000;
background-color : #800000;
}
#sidebar-a a:hover {
border : 1px solid #808080;
background-color : #cccccc;
color : #b22222;
}