具有邊框高度懸停的顏色子元素

我有一個具有2個錨子元素的父div。父div有一個邊框，在懸停時，我希望突出顯示子錨標籤。現在，我可以做到這一點，但懸停並沒有填充圍繞父div的邊框的整個寬度和高度。具有邊框高度懸停的顏色子元素

.header-info { 
 
    max-width: 250px; 
 
    padding: 10px; 
 
    text-align: center; 
 
    font-size: 0px; 
 
    margin-top: 10px; 
 
    font-size: 15px; 
 
    border-radius: 5px; 
 
} 
 
.about-header-container { 
 
    width: 240px; 
 
    border: 10px solid #027878; 
 
} 
 
.about-header-container>a:hover { 
 
    background-color: #027878; 
 
    color: white; 
 
    opacity: 0.7; 
 
}

<div class='about-header-container header-info' id='about-header'> 
 
    <a class='bio-header tablink' href='#bio-dashfolio'>Bio</a> 
 
    <a class='timeline-header tablink' href='#timeline-dashfolio'> Timeline</a> 
 
</div>

這裏的小提琴：https://jsfiddle.net/kesh92/3cnxef4h/

在生物和上空盤旋時間軸，我希望它突出的顏色#027878同時填補了內部的相應章節而不會在邊框和錨元素之間留下任何空白。提前致謝！

更新這是希望的懸停效果 -

之前懸停

當鼠標懸停在生物

來源

2016-09-17 Keshav Vasudevan

編輯：沒意識到你想填補這兩個高度和寬度。這一個將做的伎倆：

.tablink { 
    display: inline-block; 
    width: 45%; 
    padding: 5px; 
    text-align: center; 
}

在您的.header信息更改填充：5px;填充：0 5px;

工作小提琴這裏：https://jsfiddle.net/cba0cn7n/1/

並使用下面的代碼來填充身高只有

display: inline-block; 
padding: 5px 0;

您.tablink

這裏正在做的是去除填充頂和從.header-info底部並將其添加到.tablink。

來源

2016-09-17 21:04:43

感謝您花時間回覆！你提出的建議是，如果我錯了，請糾正我的錯誤，就是改變錨元素填充，以便更好地適合父邊界。我已經有適當的樣式。我想要做的就是突出顯示懸停時的錨點元素，以分別填充邊框的右側和左側部分。請參閱已更新的問題，因爲我已添加所需的結果。 Thnks！ –

嗨Keshav，我搞砸了小提琴的鏈接，但現在我明白了。檢查它在這裏：https://jsfiddle.net/cba0cn7n/1/檢查是否你正在尋找。我很樂意幫助 –

這是完美的！萬分感謝！ –

具有邊框高度懸停的顏色子元素

回答

相關問題