カーソルが画像の上にあるときに下の輪郭線を作成したいのですが、方法がわかりません。従来のボーダーボトムでレイアウトの問題が発生したくないので、この種の内側ボーダーを使用したいと思います。
これが私の現在のコードで、どこにでもアウトラインマージンがあります:
.img-lightbox-small{
width:110px;
height:110px;
margin: 1px;}
a img.img-lightbox-small:hover{
opacity:1;
outline: 3px solid #4bb6f5;
outline-offset: -3px;
}
問題を回避するには、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;
}
outline
は、borderプロパティとは異なります。あなたはすべての側面を持っているか、どれも持っていません。レイアウトが「移動」しないように、ボックスモデルを上書きするbox-sizing:border-box
と混合したborderプロパティを使用することをお勧めします。
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;
}