如何实现鼠标悬停时增大文本字号且不改变父元素及相邻元素尺寸

问题分析 #

给<a>元素设置hover时增大font-size，会撑开元素的实际尺寸，导致父元素nav高度变化，同时相邻链接被挤动。下面分两种场景给出解决方案：

场景1：阻止背景（nav）尺寸变化，保留选项间的移动效果 #

给nav设置固定高度，同时让链接元素高度与nav匹配，避免文本放大后撑破背景：

nav{
    padding:20px;
    overflow:hidden;
    background-color: #eee;
    /* 固定nav高度，可根据字体大小调整 */
    height: 40px;
    line-height: 40px;
}
nav a{
    transition: all 0.5s ease-in-out;
    float:right;
    text-decoration:none;
    color:black;
    font-family:"Goudy Old Style";
    text-align: center;
    padding:0 14px;
    /* 让链接高度与nav一致 */
    height: 40px;
    display: inline-block;
}
nav a:hover{
    color:#b3d0ff;
    font-size:19px;
}
#logo{
    float:left;
}

这样nav尺寸固定不变，但相邻链接仍会因当前元素尺寸变化产生移动效果。

场景2：完全阻止相邻元素移动，仅当前元素视觉放大 #

用transform: scale()替代修改font-size，变换仅作用于视觉层面，不会改变元素实际占位尺寸：

nav{
    padding:20px;
    overflow:hidden;
    background-color: #eee;
}
nav a{
    transition: all 0.5s ease-in-out;
    float:right;
    text-decoration:none;
    color:black;
    font-family:"Goudy Old Style";
    text-align: center;
    padding:0 14px;
    /* 设置变换原点，让放大效果居中 */
    transform-origin: center;
}
nav a:hover{
    color:#b3d0ff;
    /* 放大倍数可按需调整 */
    transform: scale(1.2);
}
#logo{
    float:left;
}

这种方式下，父元素和相邻元素位置完全不动，仅当前链接视觉上被放大。

内容的提问来源于stack exchange，提问作者Krisztián Pócs