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

Question

我有一个带有 2 个锚定子元素的父 div。父 div 有一个边框，悬停时，我希望突出显示子 anchor 标记。现在，我可以做到这一点，但悬停不会填满围绕父 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>

这是 fiddle :https://jsfiddle.net/kesh92/3cnxef4h/

将鼠标悬停在 Bio 和 Timeline 上时，我希望它突出显示颜色 #027878，同时填充边框内的相应部分在边框和 anchor 元素之间不留任何空白。提前致谢!

更新这是想要的悬停效果 -

悬停前

当悬停在 Bio 上时

Answer 1

编辑:没有意识到您想要同时填充高度和宽度。这个可以解决问题:

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

在你的 .header-info 上改变 padding: 5px;填充:0 5px；

在这里工作:https://jsfiddle.net/cba0cn7n/1/

并使用下面的代码只填充高度

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

到你的.tablink

这里所做的是从 .header-info 中删除 padding-top 和 bottom 并将其添加到 .tablink。