在保持容器尺寸的同时保持容器内悬停的字体大小，而不强制一个宽度或高度进入容器？

Question

我已经尝试做一个按钮类，这将产生一个悬停的效果，只是扩大字体大小。不幸的是，它带来了我不想要的各种副作用。

1. 我想从button-2 ( 'Text‘和'Short Text’按钮)中获得悬停效果--我不希望在按钮内或当它在其他3个按钮上悬停时，折叠在多条线上，并将其放入button-1中。所以只有字体尺寸在悬停时才会放大，而不是其他的。
2. 但是，button-1仍然应该像button-1那样工作，当它不再徘徊的时候。因此，无论是font-size或font-weight，还是文本的长度，它都适合它里面的文本。

Codeply代码示例

​

/* The button I want - However, it don't have the effect I want so ONLY the font-size change on hover and NOTHING else */
.button-1{
    display: flex;
    border: solid 2.5px red;
    color: red;
    padding: 1rem;
    margin-right: 1rem;
    font-size: 1rem;
    transition: font-size 0.25s 0s;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 700;
    align-items: center;
}

/* The effect I want - However, it doesn't have the button i want when it is not hovered where it fits the content dynamically. */
.button-2{
    display: flex;
    border: solid 2.5px red;
    color: red;
    padding: 1rem;
    margin-right: 1rem;
    font-size: 1rem;
    transition: font-size 0.25s 0s;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 700;
    align-items: center;
    height: 2rem; /* Only thing new added to button 2 */
    width: 10rem; /* Only thing new added to button 2 */
    justify-content: center; /* Only thing new added to button 2 */
}

.button-1:hover, .button-2:hover{
    font-size: 2rem;
}

li{
    list-style: none;
}

ul{
    display: flex
}

nav{
    padding: 1rem;
}

<nav>
 <p>The buttons I want - but NOT the hover effect I want. I ONLY want the font-size to change on hover and NOTHING else. <br>
 Right now it scales the whole button + font-size and mess with the layout of the other buttons</p>
 <ul>
  <li><a class="button-1" href="">Text</a></li> <!-- The button I want that always fit the content regardless of the text size and with 1rem in padding --> 
  <li><a class="button-1" href="">Short Text</a></li>
  <li><a class="button-1" href="">Medium Sized Button Text</a></li>
  <li><a class="button-1" href="">Large Sized Button Text Just For Show</a></li>
  <li><a class="button-1" href="">Very Long Text To Show How It Always Fit Content</a></li>
 </ul>
</nav>
<nav>
 <p>The hover effect I want (only on the 'text' and 'short text' button the last 3 is also not the effect I want).<br>
 But now the buttons doesn't fit the content dynamically regardless of the length of the text as above when it is not hovered</p>
 <ul>
  <li><a class="button-2" href="">Text</a></li>
  <li><a class="button-2" href="">Short Text</a></li>
  <li><a class="button-2" href="">Medium Sized Button Text</a></li>
  <li><a class="button-2" href="">Large Sized Button Text Just For Show</a></li>
  <li><a class="button-2" href="">Very Long Text To Show How It Always Fit Content</a></li>
 </ul>
</nav>

​

简单地说，我希望按钮1(不是从按钮1的悬停效果)与字体大小增加悬停效果从按钮2(前2个按钮的例子)。最好就像一个HTML标签中的一个类一样，但是如果不可能这样做，但是可以用另一种方式让它做我想做的事情，这才是真正重要的。

我不知道这是否可能，或者有解决办法或一些疯狂的calc()东西，你可以做什么，根据font-size的文本内容，它设置height和width的每个按钮。

Answer 1

正如你在评论中提到的那样，我已经修改了button-1，把整个按钮放大，这是不对的。因此，我添加了button-3，以说明如何实现这种影响，但您必须在锚中添加另一个元素(在本例中，是一个span)。然后，只需将scale转换函数添加到span，而不是锚点。

注意，按钮的初始类没有设置宽度和高度或类似的东西。如果不希望文本在框外缩放，则可能需要调整填充。

​

/* The button I want - However, it don't have the effect I want so ONLY the font-size change on hover and NOTHING else */

.button-1 {
  display: flex;
  border: solid 2.5px red;
  color: red;
  padding: 1rem;
  margin-right: 1rem;
  font-size: 1rem;
  transition: transform 0.25s 0s; /* Changed from font-size to transform */
  border-radius: 6px;
  text-decoration: none;
  font-weight: 700;
  align-items: center;
  transform: scale(1); /* added scale(1) for non-hover state */
}


/* The effect I want - However, it doesn't have the button i want when it is not hovered where it fits the content dynamically. */

.button-2 {
  display: flex;
  border: solid 2.5px red;
  color: red;
  padding: 1rem;
  margin-right: 1rem;
  font-size: 1rem;
  transition: font-size 0.25s 0s;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 700;
  align-items: center;
  height: 2rem;
  /* Only thing new added to button 2 */
  width: 10rem;
  /* Only thing new added to button 2 */
  justify-content: center;
  /* Only thing new added to button 2 */
}

.button-3 {
  display: flex;
  border: solid 2.5px red;
  color: red;
  padding: 1rem;
  margin-right: 1rem;
  font-size: 1rem;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 700;
  align-items: center;
}

/* added span rule to get scale and origin */
.button-3 span {
  transition: transform 0.25s 0s; 
  transform: scale(1); 
  transform-origin: center;
}

.button-1:hover {
  transform: scale(1.5); /* split .button-1:hover out and increased scale value for hover state */
}

.button-2:hover {
  font-size: 2rem;
}

/* Then add a :hover for the span... */
.button-3:hover span {
  transform: scale(1.5);
}

li {
  list-style: none;
}

ul {
  display: flex
}

nav {
  padding: 1rem;
}

<nav>
  <p>The buttons I want - but NOT the hover effect I want. I ONLY want the font-size to change on hover and NOTHING else. <br> Right now it scales the whole button + font-size and mess with the layout of the other buttons</p>
  <ul>
    <li><a class="button-1" href="">Text</a></li>
    <!-- The button I want that always fit the content regardless of the text size and with 1rem in padding -->
    <li><a class="button-1" href="">Short Text</a></li>
    <li><a class="button-1" href="">Medium Sized Button Text</a></li>
    <li><a class="button-1" href="">Large Sized Button Text Just For Show</a></li>
    <li><a class="button-1" href="">Very Long Text To Show How It Always Fit Content</a></li>
  </ul>
</nav>
<nav>
  <p>The hover effect I want (only on the 'text' and 'short text' button the last 3 is also not the effect I want).<br> But now the buttons doesn't fit the content dynamically regardless of the length of the text as above when it is not hovered</p>
  <ul>
    <li><a class="button-2" href="">Text</a></li>
    <li><a class="button-2" href="">Short Text</a></li>
    <li><a class="button-2" href="">Medium Sized Button Text</a></li>
    <li><a class="button-2" href="">Large Sized Button Text Just For Show</a></li>
    <li><a class="button-2" href="">Very Long Text To Show How It Always Fit Content</a></li>
  </ul>
</nav>
<nav>
  <p>The hover effect I want (only on the 'text' and 'short text' button the last 3 is also not the effect I want).<br> But now the buttons doesn't fit the content dynamically regardless of the length of the text as above when it is not hovered</p>
  <ul>
    <li><a class="button-3" href=""><span>Text</span></a></li>
    <li><a class="button-3" href=""><span>Short Text</span></a></li>
    <li><a class="button-3" href=""><span>Medium Sized Button Text</span></a></li>
    <li><a class="button-3" href=""><span>Large Sized Button Text Just For Show</span></a></li>
    <li><a class="button-3" href=""><span>Very Long Text To Show How It Always Fit Content</span></a></li>
  </ul>
</nav>

​