0

Li 要素をホバリングするときに、下部と上部に境界線を追加したい。コードは次のようになります。

#overview li:hover {
    background: rgb(31, 31, 31);
    border-top: 1px solid white;
    border-bottom: 1px solid white;
}

http://jsfiddle.net/rwDYR/ (左側のナビゲーションにカーソルを合わせる)

問題は、li要素を1または2ピクセル移動することです。すでにホバー状態の を追加しようとしましたmargin-top: -1pxが、問題は解決していません。

何か案が？

4

5 に答える 5

3

をホバリングしていないときに透明な境界線を追加します<li>(および の境界線の色のみを変更します:hover)

#overview li {
   padding: 5px;
   border-top: 1px solid transparent;
   border-bottom: 1px solid transparent;
}

#overview li:hover {
   border-color: #fff;
   /* other style ... */
}

（あなたのフィドルでオンザフライでテストされましたが、うまくいくようです）

于 2013-03-28T16:18:54.500 に答える
1

liこれは、ホバーしたときに境界線を追加しているためです。さまざまなソリューションがあります。1 つは、追加された境界線を補うためにパディングを 1 ピクセル減らすことです。

http://jsfiddle.net/rwDYR/1/

于 2013-03-28T16:18:45.783 に答える
1

最初から 1 ピクセルの上マージンを追加し、ホバー時に上マージンを 0 に設定して、1 ピクセルの上部境界線を補正することをお勧めします。（マージンの代わりに）パディングを変更することによってもそれを行うことができます

于 2013-03-28T16:18:48.037 に答える
0

更新された http://jsfiddle.net/rwDYR/5/

または境界線に同じ背景色を使用する

#overview li {

padding: 5px;     
border-top:solid 1px rgb(24, 53, 82);
border-bottom:solid 1px rgb(24, 53, 82); 

}
于 2013-03-28T16:42:21.477 に答える
0

ブラウザのサポートのレベルによっては、cssbox-sizingプロパティを使用できます

https://developer.mozilla.org/en-US/docs/CSS/box-sizing

#overview li {
    box-sizing: border-box;
}
于 2013-03-28T16:23:43.703 に答える