防止文字在盤旋時移動

我是flexbox的新手，嘗試使用它來製作菜單。防止文字在盤旋時移動

我希望鏈接在用戶懸停時在底部有一個漂亮的邊框。但即使我設置box-sizing: border-box; flex仍會重新計算文本位置和元素「跳躍」，而不是預測的行爲。我的問題是example。當我懸停時，我不希望內容中的內容跳躍。

是否有任何簡單的解決方案/版本讓我的代碼正常工作？我知道實現的其他方式我想：設定基準，用相對/絕對定位...

.item { 
 
    display: flex; 
 
    width: 200px; 
 
    height: 100px; 
 
    background: #123; 
 
    color: #fff; 
 
    text-align: center; 
 
    justify-content: center; 
 
    flex-direction: column; 
 
} 
 
.item:hover { 
 
    border-bottom: 10px solid lightgreen; 
 
    box-sizing: border-box; 
 
}

<div class="item"> 
 
    Content 
 
</div>

來源

2016-07-15 Alexander Novikov

通過在懸停時添加10px邊框，您將更改懸停時框的大小。這將重新定位周圍的元素......懸停。

一個解決方案是始終爲邊界保留空間。換句話說，在正常狀態下將10px邊框分解到元素中。

此邊框獲取元素的背景顏色（或transparent），因此不可見。懸停時，您只能更改顏色。

.item { 
 
    display: flex; 
 
    width: 200px; 
 
    height: 100px; 
 
    background: #123; 
 
    color: #fff; 
 
    text-align: center; 
 
    justify-content: center; 
 
    flex-direction: column; 
 
    position: relative; 
 
} 
 
.item::after { 
 
    content: ""; 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    border-bottom: 10px solid #123; 
 
} 
 
.item:hover::after { 
 
    border-bottom: 10px solid lightgreen; 
 
}

<div class="item">Content</div>

來源

2016-07-15 17:43:08

謝謝，它看起來不錯。 –

如果你只是設置在默認情況下使用相同的顏色，這是一個底部邊框在其背景？將鼠標懸停在項目上後，只需更改顏色即可。

來源

2016-07-15 17:40:45 Mila

是的，它會工作，我也可以設置不透明度爲0，將其更改爲1懸停 - 這將給予同樣的結果，但我不喜歡它的事實是，元素不會居中，因爲它將被移動到邊界大小的頂部。 –

或'border-color：transparent'。 – Oriol

我會用插圖的box-shadow此功能。我設法通過改變:hover css來重新創建效果：

.item:hover { 
    box-shadow: inset 0 -10px lightgreen; 
}

example here

來源

2016-07-15 17:44:59 CarlRosell

防止文字在盤旋時移動

回答

相關問題