19

状況

私は現在サイトを構築しており、いくつかの要素の上にマウスを置いたときに境界線/アウトラインを作成したいと考えています。これは作業を行うのに十分簡単です。参考までに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 !重要」に設定しました

問題

下の要素がプッシュされないようにするにはどうすればよいですか?

4

6 に答える 6

44

個人的には、次のようなものを使用します。

.hover-border {
  border: 3px solid transparent;
  display: block;
}

.hover-border:hover {
  border: 3px solid #3A3A3A;
}
于 2013-09-19T05:58:07.410 に答える
7

これらの問題に対する最善の解決策は、 box-sizing:border box プロパティを使用することです

* {box-sizing:border-box;}

その後、要素は定義したサイズを保持しますが、境界線とパディングを含めるようになりました.

于 2013-09-21T18:36:40.507 に答える
2

試してみてください。

.hover-border {
border: 3px solid transparent;
display: block;

}
.hover-border:hover{
border: 3px solid #3a3a3a;
}

または

a.no-decoration, a.no-decoration img {
border: medium none;
color: inherit;
cursor: pointer;
outline: medium none;
text-decoration: none;
display: block; /*Added*/
border: 3px solid transparent; /*Added*/
}
于 2013-09-19T05:59:47.550 に答える