边框不改变文字的大小

好的，所以我使用这个来让自己成为一个标题，当用户将鼠标悬停在标签上时，它会显示一行。我试图在不改变用户悬停在其上的大小的情况下做到这一点。我想要一条线出现，但没有别的事情会发生。边框不改变文字的大小

这里是一个小提琴， Fiddle

HTML：

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

CSS

.header-tab{ 
    height:100%; 
    display:inline-block; 
    padding:0 1vw 0 1vw; 
    text-transform:uppercase; 
    font-weight:450; 
    color:white; 
} 

.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; 
}

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

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

来源

2017-04-18 Martijn Ebbens

的WhatsUp与downvote：/？ –

此问题已被多次询问。基本上，在非悬停状态下添加透明边框，并在'：hover'状态下更改颜色。 –

[1]（http://stackoverflow.com/questions/27648342/）[1]（http://stackoverflow.com/questions/27648342/）（http://stackoverflow.com/questions/27648342/）防止高度变化时添加边框与框大小），[3]（http://stackoverflow.com/questions/9612758/add-a-css-border-on-hover -without-moving-the-element），[4]（http://stackoverflow.com/questions/3254587/when-1-px-border-is-added-to-div-div-size-increases-dont-想要做的）... [搜索]（http://stackoverflow.com/search）和[research]（http://stackoverflow.com/help/how-to-ask）。 –

您可以使用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，所以你可以看到它。

来源

2017-04-18 21:08:08

重点是，我使用vw/percentages来定义我的页脚和页眉和主页，我的页面不可滚动，所以我几乎被迫使用静态高度。无论如何， –

似乎工作得很好，谢谢，我真的不知道我会如何搜索这个问题。 –

我认为这两种方法都可以很好地工作，但我的需求会更多一点。不过，我很高兴它的工作。作为参考，我建议你找一些真实的网站菜单作为例子，并用浏览器的devtools来检查它们。可能真的派上用场！ –

请在那里看看。现在它不会跳起来。

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; 
}

来源

2017-04-18 21:09:54

首先我必须说，所有这些答案都是正确的。不过，我认为最简单的解决方案是使用背景渐变而不是背景色。将此分为悬停状态。它也是响应式的，并会根据您的vw进行调整。

.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%); 
 
}

来源

2017-04-18 21:27:49 TMKAB121

边框不改变文字的大小

回答

相关问题