Question

好的，所以当用户将鼠标悬停在标签上时，我正在使用它来使自己成为标题，它会显示一条线。我试图这样做，而不是当用户将鼠标悬停在它上面时改变大小。我希望出现一条线，但不会发生任何其他事情。

这是一个小提琴， Fiddle

HTML：

        for (int j = 0; j <= howMany - i -1; j++)

CSS

<div class="header">
  <div class="header-tab">
    <div class="center-vertical">
      Main
    </div>
  </div>
</div>

我认为这是因为垂直中心，但我很不确定。谢谢！

编辑：我不想让它喜欢，跳起来。

Answer 1

您可以使用box-shadow CSS属性而不是border-bottom。老实说，我认为这对你想要达到的目标是一个很好的结果。

.header-tab:hover{
  color:#ff704d;
  background:gray;
  box-sizing: border-box;
  box-shadow: inset 0 -3px 0 #ff704d;
}

提示：我发现您正在使用height来定义菜单的总体高度。我建议您使用.header-tab填充来调整高度。这样，您甚至不需要垂直对齐任何东西。

我已编辑了您的JSFiddle，因此您可以看到它。

Answer 2

首先我需要说，所有这些答案都是正确的。但是，我认为最简单的解决方案是使用背景渐变而不是背景颜色。将此转入您的悬停状态。它还具有响应性，并将根据您的大众进行调整。

.header-tab:hover{
  color:#ff704d;
  background: #b7b7b7;
  background: -moz-linear-gradient(top, gray 0%, gray 93%, #ff704d 99%);
  background: -webkit-linear-gradient(top, gray 0%, gray 93%, #ff704d 99%);
  background: linear-gradient(to bottom, gray 0%, gray 93%, #ff704d 99%);
}

Answer 3

请看那里。现在它没有跳起来。

https://jsfiddle.net/bizedkhan/pbxy32kq

.header-tab{
height:100%;
display:inline-block;
padding:0 1vw 0 1vw;
text-transform:uppercase;
font-weight:450;
color:white;
border-bottom: 3px solid transparent;
box-sizing: border-box;
transition: all .5s
}
.header-tab:hover{
color:#ff704d;
background:gray;
box-sizing: border-box;
border-bottom:3px solid #ff704d;
}
.center-vertical{
position: relative;
top: 50%; 
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
.header{
height:5vw;
background:black;
}
body{
 margin:0;
}

边框不会改变文本的大小

3 个答案: