Question

我试图通过在CSS中添加outline: 4px solid green来突出鼠标悬停上的元素，类似于Chrome Inspector / Firebug。
使用outline可以正常工作，因为它不占用盒子模型中的任何空间。这样，布局不会中断，一切都会保持不变。

我的方法适用于width，height，padding和border的元素。但是，outline不包含margin。

我正在寻找任何简单的解决方案，以便outline包围整个元素，包括margin。
我发现outline-offset可以通过自定义的像素量来抵消轮廓，但在IE中不支持，并且在所有四个方面都是相同的。

如果可能，我希望避免为四方添加4 <div />来模仿outline的行为。有什么想法吗？

Answer 1

解决方案可以是使用绝对定位的伪元素，并在悬停时对其应用边框。

您可以给出伪元素的上/下和左/右值来补偿元素的边距：

div {
  position: relative;
  width: 150px;
  margin: 10px 20px 30px 40px;
  padding: 20px 40px;
  background:gold;
  z-index:1;
}
div:after {
  content: '';
  position: absolute;
  top: -10px;
  right: -20px;
  bottom: -30px;
  left: -40px;
  box-sizing: border-box;
  z-index:-1;
}
div:hover:after {
  border: 1px solid green;
}

<div>content <a href="#">link</a></div>

包含边距的CSS大纲

1 个答案: