我正在設置導航鏈接的樣式,當我將鼠標懸停在鏈接上時,它會更改顏色,但它會在右側移動幾個像素,並在光標從懸停中移除時再次變爲正常。鏈接在CSS中懸停移動到右側?
我的導航CSS
.logo-wrapper {
padding-bottom: 85px;
background-color: #2e3639;
}
.logo-items{
display: inline-block;
position: relative;
color: white;
font: "Times New Roman";
float: left;
margin-left: 500px;
margin-top: 30px;
text-decoration: none;
}
.logo-items a{
text-decoration: none;
color: white;
margin-left: 10px;
margin-right: 10px;
border-bottom:solid 1px transparent;
}
.logo-items a:hover {
background-color: #61696c;
padding: 4px 4px 4px 4px;
border-radius: 10px;
}
.logo-items span {
margin-right: 10px;
}
我的導航
<div class="logo-wrapper">
<div class="logo-items">
<span>Logo</span>
<span>
<%= link_to "Tags", tags_path %>
</span>
<span>Pages</span>
</div>
</div>
嗯......你的'.logo-items a:hover'上有一個'padding'規則,塞萊構造函數。你是不是把它放在選擇符上而沒有':hover'? – ajp15243
您必須將'padding:4px;'(只有一個值已足夠,因爲所有值都是相同的)也放到'.logo-items a'中。 – Harry
請張貼小提琴,這有助於追蹤真實問題。爲什麼你把'padding:'放到':hover'css中? –