CSS悬停时负边距导致抖动问题

Question

我希望在鼠标悬停时，这个按钮能够显示出边框（就像这个样例中看到的那样）。实际上，它确实做到了我想要的效果，但在Chrome和Firefox上抖动得太厉害了（IE10似乎完美运行）。

造成这种情况的原因是什么？如何解决这个问题，使过渡不会出现抖动？

HTML:

<div id="container">
    <div class="round_bt_container">
        <div class="round_bt" style="background-image:url(http://edinhopiscinas.com.br/img/img1.png);background-size:160px;background-position:center center;background-repeat:no-repeat;">

        </div>
    </div>
</div>

CSS：

#container{
        width:80%;
        height:80%;
        position:absolute;
        padding:10%;
        background-image:url(http://edinhopiscinas.com.br/img/bg.jpg);
    }
    .round_bt_container{
        cursor:pointer;
        position:relative;
        float:left;
        margin-right:40px;
        border-radius:50%;
        border:5px solid #ffffff;
        box-shadow:2px 1px 15px -9px #000000;
        width:160px;
        height:160px;
        -webkit-transition:all 0.2s ease;
        -ms-transition: all 0.2s ease;
        -moz-transition:all 0.2s ease;
        -o-transition:all 0.2s ease;
        transition:all 0.2s ease;
    }

    .round_bt{
        position:absolute;
        border-radius:50%;
        width:160px;
        height:160px;
        padding:0;
        margin:0;
        border:0px solid #eeeeee;
        -webkit-transition:all 0.2s ease;
        -ms-transition: all 0.2s ease;
        -moz-transition:all 0.2s ease;
        -o-transition:all 0.2s ease;
        transition:all 0.2s ease;
    }

    .round_bt img{
        border-radius:50%;
    }

    .round_bt_container:hover .round_bt{
        width:160px;
        height:160px;
        border:5px solid #f98523;
        padding:15px;
        margin-left:-20px;
        margin-top:-20px;
    }

    .round_bt_container:hover{
        border:2px solid #ffcfa7;
        margin-left:3px;
        margin-top:3px;
    }

- Lucas Bernardo de Sousa

---

将 #container 的填充从百分比更改为像素（或 ems）有助于在 Chrome 中显示：http://jsfiddle.net/zcPVj/17/ - superUntitled

是的，但是使用这种解决方案仍然会导致FF和IE10出现抖动问题。 - Lucas Bernardo de Sousa

请查看我的第二次编辑。 - David Nguyen

非常好用！正是我想要的。我接受了你的答案，尽管它缺乏一些关于你具体做了什么以及为什么有效的解释。 - Lucas Bernardo de Sousa

重要的是，我将动画组件分离出来，这样当进行变形时，图像不会受到影响。 - David Nguyen

好的！感谢你的回答。 - Lucas Bernardo de Sousa

Answer 1

将环形与图像本身分离：

HTML

<div id="container">
    <div class="round_bt_container">
        <div class="inner_ring"></div>
        <div class="round_bt" style="background-image:url(http://edinhopiscinas.com.br/img/img1.png);background-size:160px;background-position:center center;background-repeat:no-repeat;"></div>
        <div class="ring"></div>
    </div>
</div>

CSS

.ring {
    position:absolute;
    border-radius:50%;
    width:160px;
    height:160px;
    padding:0;
    margin:0;
    border:0px solid #eeeeee;
    -webkit-transition:all 0.2s ease;
    -ms-transition: all 0.2s ease;
    -moz-transition:all 0.2s ease;
    -o-transition:all 0.2s ease;
    transition:all 0.2s ease;
}

.round_bt_container:hover .ring{
    width:160px;
    height:160px;
    border:5px solid #f98523;
    padding:15px;
    margin-left:-20px;
    margin-top:-20px;
}

编辑：我添加了第二个环

- David Nguyen

---

Ah在Chrome中工作正常，但在FF中不行，将5px边框改为2px仍然会使其抖动。最简单的方法是将悬停效果改为5px，否则可以创建另一个环形div。 - David Nguyen

Answer 2

通过一些修改，使您的原始fiddle和HTML工作：

将跨浏览器的box-sizing添加到圆圈中（这允许您使用实际宽度，而无需添加或减去边距和填充），它们非常棒。

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

移除了 .round_bt 上的 width 属性并将其改为百分比

width:100%;
height:100%;

这是您更新过的代码片段链接： http://jsfiddle.net/zcPVj/21/

- mikegertrudes

---

尽管这个代码可以工作，但它没有我期望的功能。我真的需要在外边框和内部元素之间有填充。如果你拿走我的原始代码中的过渡效果，它将给你我想要的确切结果（只是没有过渡效果，这是我遇到的唯一问题）。 - Lucas Bernardo de Sousa