アーシの毎日インプット

毎日1つ以上学習する。学習した内容を公開する。を目標に自分のスキルアップを目指します。

【CSS】マウスで触れたら画像を出す

スポンサードリンク

11月の新作迷路を作るべく、CSSの学習をしてみました。

 

CSSは見様見真似で色々と実験してみました。

※今回の記事はパソコンを前提としています

 

まずは、今回のものを色々試すための箱を作ります。

 

 <箱のcss

#box{
position:relative;
width:200px;
height:150px;
border:solid 3px #000000;
margin:0px auto;
}

 

 

 

次に、今回の仕掛けの一つである、マウスが重なると色が変わるエリアを作ります。

 

今回は通常時は緑色で、マウスが重なると赤くなる背景を作っていました。

 

<マウスオーバー時に背景色が変わるcss

#backA{
display:block;
width:200px;
height:150px;
background-color:#00FF00;
z-index:1;
position:absolute;
}
#backA:hover{
display:block;
width:200px;
height:150px;
background-color:#FF0000;
z-index:10;
}

 

ここでは、z-indexというのが大事になってきます。

z-indexはレイヤーを示し、1よりも10の方が大きいため、マウスが重なるとhoverの表示が有効になります。

 

ちなみに、hover側のwidthを半分にしてあげると、半分のエリアだけ色を変える事もできます。

 

 

 

次に、先程の色が変わっていた部分を画像に変えてみます。

 

<マウスオーバー時に画像が変わるcss

#backB{
display:block;
width:200px;
height:150px;
background-color:#00FF00;
z-index:1;
position:absolute;
}
#backB:hover{
display:block;
width:200px;
height:150px;
background-image:url({画像のURL});
z-index:10;
}

 

単純な色の変化ではなく、『背面』という画像に切り替わりました。

 

 

最後に、上記のcssを2つ組み合わせてみます。

 
 

<マウスオーバー時に画像が変わるcss(前面用)>

#over{
top:40px;
left:0px;
display:block;
width:100px;
height:70px;
background-color:#AAAAAA;
z-index:2;
position:absolute;
}
#over:hover{
display:block;
top:0px;
left:0px;
width:200px;
height:150px;
background-image:url({画像のURL});
z-index:10;
}

 

overの方はz-indexを2にしているため、通常時はbackBより前面に表示されます。

 

これで、back側にマウスを重ねた時は『背面』、over側にマウスを重ねた時は『前面』と表示されるようになりました!

 

 

 

これにて私の実験は完了です。

 

今回の機能を使って迷路ブログの方で11月の新作迷路を作ろうと思います。

www.arsmaze.com


どんな迷路ができあがるか想像がつく方も居ると思います^^

 

お楽しみに★

【アーシの原点】

【頭を鍛える迷路集】


スポンサードリンク