web-dev-qa-db-ja.com

「見えない境界線」を作れますか？

navbarを作成する を演習としてしようとしています。

a:hoverを使用して、ホバーされているボタンの周囲に実線の境界線を含めています。ただし、これにより、他のすべてのボタンが境界線のサイズだけ移動します。

この問題の適切な修正方法は何ですか？私は他の人がいることを知っています（議論された ここ ）、私は特に境界線を「見えないが、ホバリングされていなくてもスペースを取ります」ようにしました。私はborder:transparentを設定しますが、それが私が望むことをするかもしれないが、それはまったくスペースを取りませんでした。

私は手で境界線の色を選択して背景と同じ色にし、それを塗りつぶすことができますが、これは私が望むものではありません。この問題を解決する正しい方法はありますか？

htmlcssborder
40
ripper234

border: 10px solid transparent？

107
Phliplip

最適なオプションは、ボーダーと同じサイズの要素にパディングまたはマージンを追加し、ボーダーの幅をゼロにしてから、a:hoverセレクターでボーダーを表示してパディングを削除することです。

これがサンプルです。多くの場合、余白を使用してこれを行うこともできます。

a {
    display: inline-block;
    height: 2em; width: 100px;
    padding: 2px;
    background: #0ff;
}

a:hover {
    padding: 0;
    border :2px solid #000;
}
<a href="#">Hello World</a>
16
derekerdmann

これが期待どおりに機能しない理由の1つは、display:block オン :hover 、: hoverセレクタなしで要素に適用する必要があります。そうしないと、「シフト」ディメンションが取得されます。どのディスプレイタイプを使用するかは問題ではありません。それらが同じであることを確認する必要があり、デフォルトでは<a>はインラインです。

もう1つの理由は、簡単な境界線と関係があるため、solidの代わりにnoneのような透過バージョンの境界線タイプを追加する必要があります。

使用している手法は完全に合法であり、パディングハックやアウトライン（ディメンションを追加しない）は必要ありません。

http://jsfiddle.net/Madmartigan/kwdDB/

これを試して：

#wd-navbar li a {
     border: medium solid transparent;
     display: block;
     margin: 1px;
}

#wd-navbar li a:hover {
     background-color: #F5DEB3;
     border: medium solid;
}
5
Wesley Murch

境界線の代わりに outline CSSプロパティを使用できます。CSSプロパティは境界線のように機能しますが、サイズ計算では考慮されません。

ただし、これにはいくつかの問題があります IE 7以前ではサポートされていません 。

3
Gareth

border:transparent 手段 border: transparent 0 none

簡略構文を使用するときにプロパティを指定しない場合、すべてのプロパティをデフォルトにリセットします。

ボーダースタイルとボーダー幅を指定する必要があります。

3
Quentin

Border-colorの設定：透明;仕事をします。

a {
  border-color : transparent ;
}

a:hover {
   border-color : black;
}
0
user2647710

疑似要素::afterおよび::beforeを使用して、目に見えない境界を作成します。

0
abhishek