所以我的问题是:
悬停时,我希望字体的大小增加,但我希望黑色的容器保持不变。
正如您在示例中可能理解的,黑色容器也在增加。
这个问题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>
关于html - 悬停时增加文本大小,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/48388963/