我有一个瓷砖网格，我希望能够做的是悬停瓷砖并添加一个3px边框并保持瓷砖正确定位，而不会破坏其周围的其他瓷砖。目前我还不完全确定如何实现这一目标？这可以使用花车实现，还是我必须绝对定位每个瓷砖然后增加悬停瓷砖的z-index，使其突出其余部分？
此外，图块尺寸必须保持不变，并且边框必须位于图块之外且不能插入。
在这里小提琴：http://jsfiddle.net/Z7TwF/
答案 0 :(得分：1)
在：hover选择器上，您需要删除边框的组合宽度：
li:hover{border:3px solid #f00; width: 44px; height: 44px;}
向元素添加边框时，会增加其尺寸。因此，当您悬停元素时，删除维度属性上边框的组合宽度将解决问题。
另一种解决方案是更改盒子大小调整方法：
li
{
box-sizing: border-box;
}
这实质上告诉浏览器使用元素的宽度计算边框的宽度，从而防止原始示例中的偏移量。