悬停

Question

所以这是我的问题： 悬停时，我希望字体大小增加，但我希望黑色容器保持同意。

正如您可能对示例所理解的那样，黑色容器也在增加。

此问题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>

Answer 1

您可以使用transform: scale()代替font-size。您需要将一些样式移动到锚元素...

＆＃13;

＆＃13;

a {
  background: black;
  padding: .2rem .6rem .3rem;
  font-size: 100%;
  color: white;
}

.myclass {
  display: inline-block;
}

a:hover .myclass {
  transform: scale(1.2);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;