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

a 要素をプロック化し、疑似クラスを使って、背景画像を入れ替える。

使用している画像

030331e.jpg a:link 030331f.jpg a:visited 030331g.jpg a:hover 030331h.jpg a:active

030331d.jpg img


テキストリンクに疑似クラスを使う

クリックしる

未訪問

ソース

<p class="Reg"><a href="./" title="クリックしる">クリックしる</a></p>
<p class="Reg"><a href="urn:nai:5678" 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) ;
}

画像リンクに疑似クラスを使い、マウスオーバー時に画像を不可視状態にする

クリックしる

未訪問

ソース

<p class="Over"><a href="./" title="クリックしる"><img src="030331d.jpg" alt="クリックしる"></a></p>
<p class="Over"><a href="urn:nai:5678" 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 は別途補正が必要だぴょん。


いろいろやってみる

クリックしる

未訪問


この記事を書いた人