具有边框高度悬停的颜色子元素

我有一个具有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/检查是否你正在寻找。我很乐意帮助 –

这是完美的！万分感谢！ –

具有边框高度悬停的颜色子元素

回答

相关问题