Question

我已经制作了一系列六个盒子，当用户将鼠标悬停在字体大小的内部时会增加，但是这会移动盒子，就像我在示例中看到的那样。我该如何解决？

边框大小也是2px，但是当两个框符合它时，它看起来是4px，我怎么能让两个触摸边重叠（最好没有负边距，因为一旦屏幕调整大小会让人感到困惑）。

感谢您提前提供任何帮助。

#main-content a {
color: #000;
border: #000 solid 2px;
display: table-cell;
text-align: center;
vertical-align: middle;
text-decoration: none;
-webkit-transition: font-size ease 3s, background-color ease 0.7s;
-moz-transition: font-size ease 3s, background-color ease 0.7s;
-o-transition: font-size ease 3s, background-color ease 0.7s;
transition: font-size ease 3s, background-color ease 0.7s;
}

Answer 1

font-size导致此问题，我建议您使用transform: scale()代替font-size的解决方案。实际上我认为font-size这样做是个坏主意，变换规模会更好。我对你的小提琴做了一些改变。

#main-content a:hover {
    background-color: rgba(255, 0, 0, 0.5);
    transform: scale(1.5);
}

<强> jsFiddle

过渡字体大小更改时，li列表移动到位

1 个答案: