增加悬停时的文字大小 [英] Increase text size on hover

问题描述

所以这是我的问题:悬停时，我希望字体的大小增加，但我希望黑色容器与以前一样.

So here is my problem: On hover, I want the size of the font to increase, but I want the black container to stay identic as before.

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

As you might understand with the example, the black container is also increasing.

这个问题如何在悬停时仅增加文本框内文本的字体大小 是相关的，但我不想使用类似的东西(大小应根据文本的长度而不同):

This issue How to increase only font-size of the text inside the text box on hover is related but I don't want to use something like that (the size should be different according to the length of the text):

    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.您需要将一些样式移动到锚元素...

You could use transform: scale() instead of font-size. You'll need to move the some styling to the anchor element...

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>

这篇关于增加悬停时的文字大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！