web-dev-qa-db-ja.com

ボーダーの下の枠のみ

カーソルが画像の上にあるときに下の輪郭線を作成したいのですが、方法がわかりません。従来のボーダーボトムでレイアウトの問題が発生したくないので、この種の内側ボーダーを使用したいと思います。

これが私の現在のコードで、どこにでもアウトラインマージンがあります：

.img-lightbox-small{
width:110px;
height:110px;
margin: 1px;}

a img.img-lightbox-small:hover{
opacity:1;
outline: 3px solid #4bb6f5;
outline-offset: -3px;
}
htmlcssborderoutline
8
Jean-FIC

問題を回避するには、border-bottom、それを設定してmargin-bottom: -1px（ボーダーのサイズ）。これにより、下のコンテンツを移動できなくなります。

HTML：

<div></div>
test

CSS：

div {
    width: 100px;
    height: 100px;
    background: #eee;
}
div:hover {
    width: 100px;
    height: 100px;
    background: #eee;
    border-bottom: 1px solid;
    margin-bottom: -1px;
}

こちらのデモ

12
Ruddy

outlineは、borderプロパティとは異なります。あなたはすべての側面を持っているか、どれも持っていません。レイアウトが「移動」しないように、ボックスモデルを上書きするbox-sizing:border-boxと混合したborderプロパティを使用することをお勧めします。

http://jsfiddle.net/8XjM5/1/

div {
    width: 100px;
    height: 100px;
    background: #eee;
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
}
div:hover {
    width: 100px;
    height: 100px;
    background: #eee;
    border-bottom: 1px solid;

}
3
valerio0999