悬停时增加文字大小
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了悬停时增加文字大小相关的知识，希望对你有一定的参考价值。
所以这是我的问题：在悬停时，我希望字体的大小增加，但我希望黑色容器像以前一样保持同意。
正如您可能对示例所理解的那样，黑色容器也在增加。
这个问题How to increase only font-size of the text inside the text box on hover是相关的，但我不想使用类似的东西（根据文本的长度，大小应该是不同的）：
position: absolute;
height:20px;
width:200px;
.myclass {
background: black;
padding: .2rem .6rem .3rem;
font-size: 100%;
color: white;
}
.myclass:hover {
font-size: 120%;
}<a href="example.com"><span class="myclass">Short</span></a>
<a href="example.com"><span class="myclass">Example mid</span></a>
<a href="example.com"><span class="myclass">Very long example</span></a>答案
您可以使用transform: scale()而不是font-size。你需要将一些样式移动到锚元素......
a {
background: black;
padding: .2rem .6rem .3rem;
font-size: 100%;
color: white;
}
.myclass {
display: inline-block;
}
a:hover .myclass {
transform: scale(1.2);
}<a href="example.com"><span class="myclass">Short</span></a>
<a href="example.com"><span class="myclass">Example mid</span></a>
<a href="example.com"><span class="myclass">Very long example</span></a>以上是关于悬停时增加文字大小的主要内容，如果未能解决你的问题，请参考以下文章
为啥当鼠标悬停后出现边框时 <div> 的大小会增加？ CSS [重复]