使用flex时如何解决悬停问题答案

【问题标题】：How to solve hover issue when i use flex使用flex时如何解决悬停问题
【发布时间】：2019-03-05 03:15:05
【问题描述】：

当我将鼠标悬停在 href 上时，我使用 flex，而不是用红色改变颜色，但我使用的是 flex 一个 div，但是当我设置 margin-bottom: 50px;在按钮上，但我也不知道 href 高度增加和悬停在标签外我只想悬停在标签文本上而不是外侧部分，我也需要仅边距按钮。谢谢

.wrapper {
  flex-direction: column;
  box-sizing: border-box;
  display: flex;
  max-width: 50%;
  text-align: center;
}
.flex-box {
  flex-direction: row;
  box-sizing: border-box;
  display: flex;
}
button {
  margin-right: 16px;
  flex: 1 1 100%;
  box-sizing: border-box;
  max-width: 50%;
  margin-bottom: 50px;
}
a {
  flex: 1 1 100%;
  box-sizing: border-box;
  max-width: 50%;
}
a:hover {
  color: red;
}

<div class="wrapper">
  <div class="flex-box">
    <button type="button">Login</button>
    <a href="#">Forget Password</a>
  </div>
</div>

【问题讨论】：

标签： html css flexbox

【解决方案1】：

调整对齐到flex-start，避免a标签被拉伸：

.wrapper {
  flex-direction: column;
  box-sizing: border-box;
  display: flex;
  max-width: 50%;
  text-align: center;
}
.flex-box {
  flex-direction: row;
  box-sizing: border-box;
  display: flex;
  align-items:flex-start; /*Added this*/
}
button {
  margin-right: 16px;
  flex: 1 1 100%;
  box-sizing: border-box;
  max-width: 50%;
  margin-bottom: 50px;
}
a {
  flex: 1 1 100%;
  box-sizing: border-box;
  max-width: 50%;
}
a:hover {
  color: red;
}

<div class="wrapper">
  <div class="flex-box">
    <button type="button">Login</button>
    <a href="#">Forget Password</a>
  </div>
</div>

您也可以将margin-bottom:auto添加到a

.wrapper {
  flex-direction: column;
  box-sizing: border-box;
  display: flex;
  max-width: 50%;
  text-align: center;
}
.flex-box {
  flex-direction: row;
  box-sizing: border-box;
  display: flex;
}
button {
  margin-right: 16px;
  flex: 1 1 100%;
  box-sizing: border-box;
  max-width: 50%;
  margin-bottom: 50px;
}
a {
  flex: 1 1 100%;
  box-sizing: border-box;
  max-width: 50%;
  margin-bottom:auto; /*Added this*/
}
a:hover {
  color: red;
}

<div class="wrapper">
  <div class="flex-box">
    <button type="button">Login</button>
    <a href="#">Forget Password</a>
  </div>
</div>

【讨论】：

【解决方案2】：

就像this.set "align-items:flex-start;"

.wrapper {
  flex-direction: column;
  box-sizing: border-box;
  display: flex;
  max-width: 50%;
  text-align: center;
}
.flex-box {
  flex-direction: row;
  box-sizing: border-box;
  display: flex;
  align-items:flex-start;
}
button {
  margin-right: 16px;
  box-sizing: border-box;
  max-width: 50%;
  margin-bottom: 50px;
}
a {
  box-sizing: border-box;
  max-width: 50%;
}
a:hover {
  color: red;
}

<div class="wrapper">
  <div class="flex-box">
    <button type="button">Login</button>
    <a href="#">Forget Password</a>
  </div>
</div>

【讨论】：