悬停时为具有边框高度的子元素着色

Question

我有一个带有 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/

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

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

悬停前

当悬停在生物上时

Answer 1

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

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

在您的 .header-info 更改填充：5px；到填充：0 5px；

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

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

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

到你的 .tablink

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