Question

我正在制作导航菜单。

当我将鼠标悬停在菜单文本上时，会出现一个边框底部，但随之而来的是文字向上移动。

＆＃13;

.b-b {
  border-bottom: thin #cadadd solid;
}

.row_height {
  height: 46px;
}

.menu_div {
  display: table-cell;
  vertical-align: bottom;
  height: 46px;
}

.menu_div span {
  position: relative;
  bottom: 3px;
}

.menu_div:hover {
  border-bottom: 2px solid #353f51;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="row b-b row_height">
  <div class="col-lg-2">
    <div class="menu_div">
      <span>Home</span>
    </div>
  </div>
</div>

＆＃13;

任何帮助都会很棒。

谢谢。

Answer 1

因为你在悬停时有2px的边框，所以这是因为。添加此内容以解决此问题：

.menu_div {
  border-bottom: 2px solid transparent;
}

Answer 2

为元素.menu_div设置一个不可见的底部边框，如下所示：

.menu_div{
    display: table-cell;
    vertical-align: bottom;
    height:46px;
    border: 2px solid transparent;
}

＆＃13;

.b-b {
  border-bottom: thin #cadadd solid;
}

.row_height {
  height: 46px;
}

.menu_div {
  display: table-cell;
  vertical-align: bottom;
  height: 46px;
  border: 2px solid transparent;
}

.menu_div span {
  position: relative;
  bottom: 3px;
}

.menu_div:hover {
  border-bottom: 2px solid #353f51;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="row b-b row_height">
  <div class="col-lg-2">
    <div class="menu_div">
      <span>Home</span>
    </div>
  </div>
</div>

＆＃13;

CSS：文本在悬停时向上移动

2 个答案: