状況
私は現在サイトを構築しており、いくつかの要素の上にマウスを置いたときに境界線/アウトラインを作成したいと考えています。これは作業を行うのに十分簡単です。参考までにStaginエリアリンクのステージングサイトをご覧ください。最新のブートストラップのグリッド部分とボックス サイジング モデルを使用しています。
問題
ホバリングすると、ホバリングされているコンテンツの下にあるコンテンツが次の要素のはるか下に「プッシュ」されることがわかりました。stagin 領域を参考にして、CSS を使用して動作を変更し、左側または右側でこれを修正できますが、両方を同時に修正することはできません。
コード
エフェクトを作成するために使用する CSS のスニペットを次に示します。
.hover-border:hover {
border: 3px solid #3A3A3A;
display: block;
}
このメソッドを使用すると、最初の要素以外は期待どおりに動作します。この次のスニペットを試すと、最初の要素は機能しますが、他の要素は壊れます:
.hover-border:hover {
border: 3px solid #3A3A3A;
display: block;
margin-top: -6px;
}
継承されたプロパティに関して明確にするために、ホバーするまでの標準的な動作のために、問題の要素のマージン/パディングを「0 !重要」に設定しました
問題
下の要素がプッシュされないようにするにはどうすればよいですか?