CSS边框移动div

Question

我正在使用自定义 Leaflet 标记，并且正在为被点击的标记添加边框。但是，添加标记会移动 div 元素。我有一个动画 gif 来展示我的意思:

我想要的是在添加金色边框时绿色圆圈保持原位。我的CSS:

.marker-cluster-div {
background-color: #00ff00;
min-width: 40px;
min-height: 40px;
font-size: 12px;
border-radius: 50%;
color: black;
font-weight: bold;
text-align: center;
vertical-align: middle;
line-height: 40px;
}

.selectedMarker {
border: 10px solid gold;
border-radius: 50%;
}

Answer 1

尝试添加硬框阴影而不是边框​​

.selectedMarker {
    box-shadow: 0 0 0 10px gold;
    border-radius: 50%;
}

box-shadow 不会改变元素在页面上占据的空间量。

或者，当您的 div 未悬停时添加透明边框。