有一个带有图像的容器,它还有一个带有’overlay’类的div.我想要实现的是,在鼠标悬停时,圆圈应该用叠加层填充.它正在变满,但它也显示出从正方形到圆形的尴尬.我该如何摆脱它.

HTML代码：

<div>
   <img src="#">
   <div>
   </div>
</div>

CSS代码：

.container{
    position: relative;
    width: 300px;
    height: 300px;
    border-radius: 100%;
    overflow: hidden;
    margin: 0 auto;
    }
 .overlay{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #49c8ff;
    opacity: 0;
    top: 0px;

transition:         all 300ms ease;;
                    -moz-transition:    all 300ms ease;
                    -webkit-transition: all 300ms ease;
                    -o-transition:      all 300ms ease;
                    -ms-transition:     all 300ms ease;
  }
.container:hover .overlay{
    opacity: 1;
 }

.overlay{
    border-radius: 50%;
}

工作FIDDLE

这是我用于我的网站的导航栏的示例.每个div框应该在2秒内滑出到相应的位置.然而,除了Chrome之外的每个浏览器,它们都会快速捕捉而不是平滑过渡.

http://jsfiddle.net/kwh71787/cxBxL/

如果有人有任何见解,请帮助

#navbuttons div {
    position: absolute;
    left: 0px;
}

DEMO

仍然在Chrome中(第15节)我变得非常明显,但是不规则的发生,鼠标悬停时闪烁.这怎么可能呢？还在IE8和FF6上进行了测试,似乎没有问题.这让我很烦恼.

我想一般的问题是,之前有人见过这样的事吗？什么能解释这种奇怪的行为？

虽然我看不出有什么用处,但我还是包含了相关的css-snippet：

CSS

编辑：改变了css规则的顺序以反映真实情况(虽然我看不出有所作为)

#mc_embed_signup input.button {
display: inline-block;
width: 100px;
margin: -1px 0 10px 15px;
padding: 0;
border: 0 none;
cursor: pointer;
background: url('http://static.parisforaweekend.com/img/s.jpg') 0 0;
line-height: 32px;
}

#mc_embed_signup input.button:hover {
background: url('http://static.parisforaweekend.com/img/s.jpg') -101px 0;
}

HTML

<input type="submit" value="" name="subscribe" id="mc-embedded-subscribe">

编辑：也许这与我使用S3 cloudfront(亚马逊的CDN)的事实有关.没有正确缓存(在Edge-location或客户端上)并执行2个请求或其他内容.嗯,还不太可能.