イテルの一日一問

マウスオーバーで画像にラインをつけるcss

イテル on 08 21, 2009

時間がない、面倒くさい場合に使いたい、CSSで
マウスオーバーした時に画像のフチにラインをつける方法。

#fuchi-gazou a img,
#fuchi-gazou a{
    border: none;
    overflow: hidden;
    float: left;
}
#fuchi-gazou  a:hover{
    border: 5px solid #333333;
    }
#fuchi-gazou a:hover img{
    margin: -5px;
}

これだけ。
floatなどを使用するので若干調整が必要な場合もある。