悬停时列表项下方的边框底部不起作用答案

【问题标题】：Border-bottom below the list items on hover is not working悬停时列表项下方的边框底部不起作用
【发布时间】：2018-02-11 07:52:43
【问题描述】：

我想在“悬停”时在每个列表项的底部有一个带有绿色边框的菜单，并且在列表项的底部也有一个绿色边框，并且类处于活动状态。但我希望每个列表项中的 <a> 元素在垂直和水平方向居中，并且在 :hover 效果下，<a> 元素始终位于中心。

我在这个例子中有菜单：https://jsfiddle.net/fyh7o9jj/，但没有出现底部边框。你知道问题出在哪里吗？

.menu {
  display: flex;
  width: 100%;
  justify-content: space-between;
  transition: all 200ms ease-out;
}
.menu li {
  align-items: center;
  border-bottom: 0 solid gray;
  box-sizing: border-box;
  display: flex;
  flex: 1 1 auto;
  height: 59px;
  justify-content: center;
  padding: 5px 0;
  background-color: yellow;
}
.menu li a {
  color: green;
  font-size: 16px;
  font-weight: bold;
}
.menu li a:hover {
  border-bottom-color: green;
  color: #000;
  cursor: pointer;
  padding-bottom: 0;
  text-decoration: none;
}
.menu .ative {
  border-bottom-color: green;
}

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">

<div class="list-container">
  <div class="container">
    <div class="row no-gutters">
      <ul class="menu">
        <li><a href="">Item</a></li>
        <li><a href="">Item</a></li>
        <li><a href="">Item</a></li>
        <li><a href="">Item</a></li>
      </ul>
    </div>
  </div>
</div>

【问题讨论】：

标签： html css hover flexbox

【解决方案1】：

将hover 添加到li 而不是a，如下所示：

.menu li a {
  color: green;
  font-size: 16px;
  font-weight: bold;
}
.menu li:hover {
  border-bottom: 1px solid green;
}

见下面的演示和updated jsfiddle:

.menu {
  display: flex;
  width: 100%;
  justify-content: space-between;
  transition: all 200ms ease-out;
  padding: 0;
}
.menu li {
  align-items: center;
  border-bottom: 0 solid gray;
  box-sizing: border-box;
  display: flex;
  flex: 1 1 auto;
  height: 59px;
  justify-content: center;
  padding: 5px 0;
  background-color: yellow;
}
.menu li a {
  color: green;
  font-size: 16px;
  font-weight: bold;
}
.menu li:hover {
  border-bottom: 1px solid green;
}
.menu li:hover a {
  color: #000;
  cursor: pointer;
  padding-bottom: 0;
  text-decoration: none;
}
.menu .ative {
  border-bottom-color: green;
}

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">

<div class="list-container">
  <div class="container">
    <div class="row no-gutters">
      <ul class="menu">
        <li><a href="">Item</a></li>
        <li><a href="">Item</a></li>
        <li><a href="">Item</a></li>
        <li><a href="">Item</a></li>
      </ul>
    </div>
  </div>
</div>

【讨论】：

谢谢，你也知道为什么 ative 类不起作用吗？
仅设置 border-bottom-color 将不起作用，因为 border-bottom-width 默认为 0 .. 这就是它不起作用的原因...使用类似 border-bottom: 1px solid green 的东西
谢谢，但是带有类 ative 的列表项看起来略高于其他列表项（未垂直对齐）。同样悬停在带有类 .ative 动作的列表项上。
将border: 1px solid transparent 添加到.menu li