所以我的问题是:
悬停时,我希望字体的大小增加,但我希望黑色的容器保持不变。
正如您在示例中可能理解的,黑色容器也在增加。
这个问题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/

10-11 20:42
查看更多