html - CSS:悬停时减小元素大小，但保持原始 "hover area"

Question

当鼠标悬停在元素上时，我想稍微减小元素大小作为效果。然而，这看起来有问题，因为随着元素尺寸的减小，“悬停区域”也变小，这可能导致元素不再悬停，进一步导致这种“尺寸闪烁”。

是否有适当的方法在悬停时减少元素大小，同时保持悬停区域大小不变？没有额外的元素？

这是一个 fiddle :https://jsfiddle.net/ahvonenj/88f5by59/

fiddle 链接所需的代码:

#di
{
  position: absolute;
  left: 15px;
  top: 15px;
  background-color: #2980b9;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
}

#di:hover
{
  width: 50px;
  height: 50px;
  transition: all 200ms linear;
}

Answer 1

如评论所述，将其包装在一个 div 中会更好。但是，如果不添加其他元素是必须，您可以使用伪元素。

使可见部分成为一个伪元素(如 :before)，并保留主要部分仅用于悬停:

提示:如果您希望鼠标悬停和移出时都具有过渡效果，请将该属性设置为主要的 css 规则，而不是悬停规则

#di
{
  position: absolute;
  left: 15px;
  top: 15px;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
}

#di:before {
  content: "";
  display: block;
  background-color: #2980b9;
  width: 100px;
  height: 100px;
}

#di:hover:before
{
  width: 50px;
  height: 50px;
  transition: all 200ms linear;
}

<div id = "di">
</div>