Javascript 在保持背景色的同时展开悬停区域

我有一个div，我想扩展它的“悬停区域”。（如果您的鼠标刚好在元素外部，css:hover选择器仍应有效。）

我尝试创建一个透明边框：（

边框：10px实心透明；

）不幸的是，我的div有一个背景色，背景“泄漏”到边框区域。（有关该问题的演示，请参见。）

我还尝试使用

outline

而不是border，但在悬停时，outline似乎不“算作”元素的一部分。（它看起来不错，但不会检测到额外的悬停区域。）

有没有办法用简单的CSS（最好不要有太多额外的元素）做到这一点？如果没有，是否有一个简单的方法使用vanilla JS（无jQuery）

$（“#切换”）。单击（函数（）{
$（“#尝试”）.toggleClass（“边框”）；
});
#尝试{
宽度：100px；
高度：200px；
背景：#aaa；
利润率：50像素；
}
#边界{
边距：20px；/*在边框增加尺寸后，更改边距使方框保持在同一位置*/
边框：30px实心透明；
}

切换边框
边框（在理想情况下）不会更改元素的背景。但是，添加30px边框（即使透明）将导致背景大小发生变化。
防止背景泄漏所需的只是
框大小属性。这是一个非常重要的问题。只需将其添加到
#尝试
：

#attempt {
  box-sizing: border-box;
}

查看更新的小提琴。您可以了解更多有关盒子大小的信息，这正是我想要的！谢谢你的帮助！