<button class="btn">点击按钮</button>

如果想要实现当鼠标悬停在按钮上时，按钮笔墨加粗，在 CSS 里这样设置

.btn:hover { font-weight: bolder;}

但是这样做了之后，当笔墨加粗后，势必会将按钮的尺寸撑的更大。
那么有可能会影响到按钮周围其他 HTML 元素的位置，如果你的页面内容比较多，而且比较紧凑的话，撑大的按钮会将周围的元素推开，这很有可能会扰乱页面的布局。

如果既要保留按钮的鼠标悬停笔墨加粗的效果，还不能影响到周围元素的位置，可以再给按钮设定一个固定的尺寸。

html按钮鼠标悬停显示文字CSS鼠标悬停在按钮上文字加粗但按钮宽度不变 React

.btn { padding: 1rem; width: 4rem;}.btn:hover { font-weight: bolder;}

这样按钮的尺寸就不会变革，但是笔墨在鼠标悬停时会加粗，按钮周围的元素也不会受到影响。

以上这种情形一样平常在页面顶部的导航条上最为常见，请大家把稳。