CSS のお勉強：マウスオーバーで背景画像を入れ替える

クリックしる

未訪問

ソース

<p class="Reg"><a href="Over.html" title="クリックしる">クリックしる</a></p>
<p class="Reg"><a href="urn:nai:1234" title="未訪問">未訪問</a></p>

スタイルシート

p.Reg a{
    display : block ;
    width : 100px ;
    padding-top : 100px ;
    text-align : center ;
    background-repeat : no-repeat ;
    background-position : top center ;
}

p.Reg a:link{
    color : blue ;
    background-image : url(030331e.jpg) ;
}

p.Reg a:visited{
    color : purple ;
    background-image : url(030331f.jpg) ;
}

p.Reg a:hover{
    color : red ;
    background-image : url(030331g.jpg) ;
}

p.Reg a:active{
    color : green ;
    background-image : url(030331h.jpg) ;
}

• CSS：画像置換 - マウスオーバーで背景画像を入れ替える。ロールオーバーとか - 2

ソース

<p class="Over"><a href="Over.html" title="クリックしる"><img src="030331d.jpg" alt="クリックしる"></a></p>
<p class="Over"><a href="urn:nai" title="未訪問"><img src="030331d.jpg" alt="未訪問"></a></p>

スタイルシート

p.Over a{
    display : block ;
    width : 100px ;
    height : 100px ;
    background-repeat : no-repeat ;
    background-position : center center ;
}

p.Over a:link {
    color : blue ;
    background-image : url(030331e.jpg) ;
}

p.Over a:visited{
    color : purple ;
    background-image : url(030331f.jpg) ;
}

p.Over a:hover{
    color : red ;
    background-image : url(030331g.jpg) ;
}

p.Over a:active{
    color : green ;
    background-image : url(030331h.jpg) ;
}

p.Over a:link img{
    visibility : visible ;
    border-style : none ;
}

p.Over a:visited img{
    visibility : hidden ;
    border-style : none ;
}

p.Over a:hover img{
    visibility : hidden ;
    border-style : none ;
}

p.Over a:active img{
    visibility : hidden ;
    border-style : none ;
}

WinIE6 は別途補正が必要だぴょん。