ロールオーバーで遊ぶ休日

→

途中で挫折シリーズｗ
更新やめようかと思ったんだけど、備忘録的にメモをしておく。

ロールオーバーを使って何か動きのあるコンテンツできないかなーと色々なサイトを見ていました。

やりたかったのは

この部分に電球の画像をつけて、マウスオーバーすると電球が光る！的なもの。

参考にしたサイト

CSS(スタイルシート) ロールオーバー

わかりやすい。
グローバルメニューのロールオーバーの時とか参考になりますよね。

※今、思いついたんだけどロールオーバーで単純にこの部分の変更すればできるんじゃないか。

========（作業中）========

できましたｗ
ちょっと複雑に考えすぎてて出来なかったっぽいですね。

実際のコード変更

.socialbox{
text-indent: 30px;
margin-top: 5px;
padding-top: 15px;
padding-right: 5px;
padding-left: 7px;
padding-bottom: 60px;
background-color:#f5f5f5;
background:url(/wp-content/uploads/32px_light_off.png) no-repeat;
background-position:5px 5px;
border-style: dotted; border-color:#696969;
font-size: 1.5em;
}

ここは元々あった部分のデザイン変更。
画像の差し込みとそれに合わせてテキストを少し右にずらしています。

.socialbox ul{
text-indent: 0px;
}

text-indentを挟むことによってソーシャルボタンが崩れてしまうのでボタン設定をしているul部分をindent無効に。

.socialbox:hover{
background:url(/wp-content/uploads/32px_light_on.png) no-repeat;
background-position:5px 5px;
}

ロールオーバー後の設定。結構単純。

自分でコーディングしてみると、シャレオツなあのサイトもこういう仕組みで動いてるんだ、というのが分かってきますね。
理屈でわかってるのとはまた別の感覚が身についてくる。

その他気付き

今回のPOSTって「途中までやったけどできなかった」的な更新だったんですが、メモとして書いていくうちに「こうすればできるんじゃないか？」というひらめきが生まれ、最終的に成功しました。
ダメだった、という時も「どうダメだったのか」というのをアウトプットしていくと新たなひらめきが生まれるかも知れませんね。