邊框不改變文字的大小

好的，所以我使用這個來讓自己成爲一個標題，當用戶將鼠標懸停在標籤上時，它會顯示一行。我試圖在不改變用戶懸停在其上的大小的情況下做到這一點。我想要一條線出現，但沒有別的事情會發生。邊框不改變文字的大小

這裏是一個小提琴， Fiddle

HTML：

<div class="header"> 
    <div class="header-tab"> 
    <div class="center-vertical"> 
     Main 
    </div> 
    </div> 
</div>

CSS

.header-tab{ 
    height:100%; 
    display:inline-block; 
    padding:0 1vw 0 1vw; 
    text-transform:uppercase; 
    font-weight:450; 
    color:white; 
} 

.header-tab:hover{ 
    color:#ff704d; 
    background:gray; 
    box-sizing: border-box; 
    border-bottom:3px solid #ff704d; 
} 

.center-vertical{ 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
    -webkit-transform: translateY(-50%); 
} 

.header{ 
    height:5vw; 
    background:black; 
} 

body{ 
    margin:0; 
}

我認爲，這是因爲垂直居中的，但我不是很確定。謝謝！

編輯：我不想讓它喜歡，跳起來。

來源

2017-04-18 Martijn Ebbens

的WhatsUp與downvote：/？ –

此問題已被多次詢問。基本上，在非懸停狀態下添加透明邊框，並在'：hover'狀態下更改顏色。 –

[1]（http://stackoverflow.com/questions/27648342/）[1]（http://stackoverflow.com/questions/27648342/）（http://stackoverflow.com/questions/27648342/）防止高度變化時添加邊框與框大小），[3]（http://stackoverflow.com/questions/9612758/add-a-css-border-on-hover -without-moving-the-element），[4]（http://stackoverflow.com/questions/3254587/when-1-px-border-is-added-to-div-div-size-increases-dont-想要做的）... [搜索]（http://stackoverflow.com/search）和[research]（http://stackoverflow.com/help/how-to-ask）。 –

您可以使用box-shadow CSS屬性而不是border-bottom。說實話，我認爲這對你想達到的目標是一個不錯的結果。

.header-tab:hover{ 
    color:#ff704d; 
    background:gray; 
    box-sizing: border-box; 
    box-shadow: inset 0 -3px 0 #ff704d; 
}

提示：我看到你正在使用height來定義菜單的整體高度。我建議你使用.header-tab填充來調整高度。這樣，你甚至不需要垂直對齊任何東西。

我編輯了你的JSFiddle，所以你可以看到它。

來源

2017-04-18 21:08:08

重點是，我使用vw/percentages來定義我的頁腳和頁眉和主頁，我的頁面不可滾動，所以我幾乎被迫使用靜態高度。無論如何， –

似乎工作得很好，謝謝，我真的不知道我會如何搜索這個問題。 –

我認爲這兩種方法都可以很好地工作，但我的需求會更多一點。不過，我很高興它的工作。作爲參考，我建議你找一些真實的網站菜單作爲例子，並用瀏覽器的devtools來檢查它們。可能真的派上用場！ –

請在那裏看看。現在它不會跳起來。

https://jsfiddle.net/bizedkhan/pbxy32kq

.header-tab{ 
height:100%; 
display:inline-block; 
padding:0 1vw 0 1vw; 
text-transform:uppercase; 
font-weight:450; 
color:white; 
border-bottom: 3px solid transparent; 
box-sizing: border-box; 
transition: all .5s 
} 
.header-tab:hover{ 
color:#ff704d; 
background:gray; 
box-sizing: border-box; 
border-bottom:3px solid #ff704d; 
} 
.center-vertical{ 
position: relative; 
top: 50%; 
transform: translateY(-50%); 
-webkit-transform: translateY(-50%); 
} 
.header{ 
height:5vw; 
background:black; 
} 
body{ 
margin:0; 
}

來源

2017-04-18 21:09:54

首先我必須說，所有這些答案都是正確的。不過，我認爲最簡單的解決方案是使用背景漸變而不是背景色。將此分爲懸停狀態。它也是響應式的，並會根據您的vw進行調整。

.header-tab:hover{ 
 
    color:#ff704d; 
 
    background: #b7b7b7; 
 
    background: -moz-linear-gradient(top, gray 0%, gray 93%, #ff704d 99%); 
 
    background: -webkit-linear-gradient(top, gray 0%, gray 93%, #ff704d 99%); 
 
    background: linear-gradient(to bottom, gray 0%, gray 93%, #ff704d 99%); 
 
}

來源

2017-04-18 21:27:49 TMKAB121

邊框不改變文字的大小

回答

相關問題