如何在悬停时增加边框宽度而又不移走CSS中的div位置? [英] how can i increase border width on hover without dislodging the div position in css?

问题描述

我正在尝试使用它，以便将鼠标悬停在圆形div上会导致粗的虚线边框向外放射，同时将内部区域保持在同一位置.(想法是给人以盛开的花朵的印象.)到目前为止，我尝试过的所有操作都导致中心移动以适应边框宽度的增加.有没有办法用纯CSS完成我想要的?

i'm trying to have it so that hovering on a circular div causes a thick dotted border to radiate outwards while keeping the inner area in the same place. (the idea is to give the impression of a blooming flower.) so far everything i've tried has resulted in the center moving to accomodate the increase in border width. is there a way to accomplish what i want with pure css?

这就是我正在使用的:

#f {
    left:10px;
    top:10px;
    position:fixed;
    border:10px dotted #0db;
    border-radius:50%;
    width:43px;
    height:43px;
    -webkit-transition: border .4s ease-in;
    -moz-transition: border .4s ease-in;
    -o-transition: border .4s ease-in;
}

#f:hover {
    border:40px dotted #fb0;
}

推荐答案

最简单的方法是设置 box-sizing:border-box; 并使用当前设置的边框宽度增加元素大小.

The simplest would be to set box-sizing: border-box; and increase the elements size with the border's now set width.

由于 box-sizing:border-box; 使边框宽度在元素的尺寸之内，因此它将其尺寸保持在边框大小上.

Since box-sizing: border-box; make border width within the size of the element, it will keep its size on a border resize.

旁注:

别忘了在规则中添加非前缀的 transition:border .4s easy-in; .

Don't forget to add the non-prefixed transition: border .4s ease-in; to your rule.

还请注意，Firefox和Edge/IE11中的虚线边框看起来与Chrome中的虚线边框不同.

Be also aware of that dotted borders in Firefox and Edge/IE11 doesn't look the same as in Chrome.

FF实际上根本不显示它，虚线框未在firefox中显示

FF doesn't show it at all actually, Dashed border not showing in firefox

#f {
  left:10px;
  top:10px;
  position:fixed;
  box-sizing: border-box;
  border:10px dotted #0db;
  border-radius:50%;
  width:53px;
  height:53px;
  -webkit-transition: border .4s ease-in;
  -moz-transition: border .4s ease-in;
  -o-transition: border .4s ease-in;
  transition: border .4s ease-in;
}

#f:hover {
  border: 20px dotted #fb0;
}

<div id="f"></div>

这篇关于如何在悬停时增加边框宽度而又不移走CSS中的div位置?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！