我希望在鼠标悬停时,这个按钮能够显示出边框(就像这个样例中看到的那样)。实际上,它确实做到了我想要的效果,但在Chrome和Firefox上抖动得太厉害了(IE10似乎完美运行)。
造成这种情况的原因是什么?如何解决这个问题,使过渡不会出现抖动?
HTML:
造成这种情况的原因是什么?如何解决这个问题,使过渡不会出现抖动?
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;
}