マウスフォーカスで背景画像変更(CSS)＠Webデザインのお勉強

マウスフォーカスで背景画像変更(CSS)＠Webデザインのお勉強

よくメニューなどで、マウスフォーカス時に、
背景画像が変化されますね。

以下では、Divタグ内のリンクに対して、
マウスフォーカス時に、背景画像を変更しています。

divタグに、「clss=class="hoverDiv">」とする。
head内に、CSSを記述する。

「div.hoverDiv a」：リンクの初期設定
「div.hoverDiv a:hover」：マウスフォーカス時の設定

<html>
<head>
<style type=text/css>

div.hoverDiv a{
    display:block;
    width:171px;
    height:62px;
    background-repeat:no-repeat;
    background-image:url("./img002.jpg");
}

div.hoverDiv a:hover{
    background-image:url("./img003.jpg");
}

</style>
</head>
<body>
<div class="hoverDiv">
    <a href="#></a>
</div>

</body>
</html>