1

border-bottom が 4px のボタンを作成しました。ボタンをホバリングしている間、border-bottom-width を 0px に減らし、top of 4px を追加して、ボタンの下の他の要素に影響を与えないようにしています。

しかし、ボタンをホバリングしている間、ボタンの下のアイテムが移動しています。ボタン以降のブロックは4px上を考慮していないからです。だから、見栄えがよくありません。この問題を克服する方法..

.btn{
    padding: 30px;
    background-color: #30d589;
    cursor: pointer;
    border-bottom: 4px solid #1b8454;
}

.btn:hover{
    border-bottom-width: 0px;
    top: 4px;
}

jsFiddleでコードを更新しました

前もって感謝します..

4

3 に答える 3

0

更新されたフィドル: http://jsfiddle.net/5mhGt/5/。

問題を解決する最も簡単な方法は、境界線を透明にすることです。

.btn:hover {
    border-bottom-color: transparent;
}

などの別のプロパティを台無しにする必要はありませんmargin-bottom。将来境界線の幅を変更することにした場合、この余白を常に念頭に置く必要はありません。

于 2013-10-08T18:26:04.097 に答える