css - 为浮动在固定容器内的悬停元素添加额外边框？

Question

我有一个瓷砖网格，我想要做的是悬停一个瓷砖并添加一个 3px 边框并保持瓷砖正确定位而不会破坏它周围的其他瓷砖。目前我不完全确定如何实现这一目标？这可以使用浮动来实现，还是我必须绝对定位每个图块，然后增加悬停图块的 z-index 以使其突出于其余部分？

此外，瓷砖尺寸必须保持不变，并且边框必须在瓷砖之外而不是插入。

在这里小提琴：http: //jsfiddle.net/Z7TwF/

score 1 · Accepted Answer

在 :hover 选择器上，您需要删除边框的组合宽度：

li:hover{border:3px solid #f00; width: 44px; height: 44px;}

当您为元素添加边框时，它会增加其尺寸。因此，当您将元素悬停时，删除维度属性上边框的组合宽度将解决问题。

另一种解决方案是更改 box-sizing 方法：

li
{
    box-sizing: border-box;
}

这实质上是告诉浏览器用元素的宽度计算边框的宽度，防止您在原始示例中出现偏移。

1 回答 1