所以这是我的问题：On hover， 我想要字体大小增加，但我想要黑色容器保持一致像之前一样。
正如您可能通过示例了解的那样，黑色容器也在增加。
这个问题如何在悬停时仅增加文本框中文本的字体大小 https://stackoverflow.com/questions/40014843/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()而不是字体大小。您需要将一些样式移动到锚元素......
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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
