1

悬停时如何停止此div的闪烁，仅在Firefox中存在问题，chrome很好

http://jsfiddle.net/GpuUb/

jQuery解决方案很好

CSS

div {
    height: 30px;
    width: 30px;
    background-color: #000;
    margin: 50px;
    border-radius: 15px;
    transition: all 1s;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
}

div:hover {
    height: 300px;
    width: 300px;
    background-color: #000;
    margin: 50px;
    border-radius: 150px;
}
4

2 回答 2

3

它没有太多闪烁，因为它正在失去悬停事件。Firefox 不会在鼠标悬停的空白部分检测到您border-radius的鼠标。如果您移动鼠标使其停留在黑色部分，则它会平滑过渡。

我不确定这是 Firefox 和其他浏览器中的错误，还是规范未定义。根据我在 CSS3 规范中阅读的内容，没有讨论如何border-radius影响盒子模型。也许由于这个遗漏，它不应该影响盒子模型，然后这将是 Firefox 中的一个缺陷。

您可以使用包装的容器 div 来修复它，但这并不是非常优雅。这是您的带有包装器 div 的修改版本。

HTML

<div id="container"><div id="circle"></div></div>

CSS

div#container {
    display: inline-block;
    background-color: green;
    margin: 50px;
}
div#circle {
    height: 30px;
    width: 30px;
    background-color: #000;
    border-radius: 15px;
    transition: all 1s;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
}

div#container:hover div {
    width: 300px;
    height: 300px;
    background-color: #000;
    border-radius: 150px;
}

这是要玩的jsFiddle 。

于 2013-01-21T20:39:56.053 回答
1

我会将圆圈定位在中间并将其均匀地扩展到所有侧面。那么闪烁效果就不会出现了：

CSS：

div {
    height: 30px;
    width: 30px;
    background-color: #000;
    margin: 75px;
    border-radius: 15px;
    transition: all 1s;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
}

div:hover {
    height: 300px;
    width: 300px;
    background-color: #000;
    margin: 00px;
    border-radius: 150px;
}

HTML：

<div></div>

提琴手：http: //jsfiddle.net/eNabK/

我不知道这是否适用于你。

于 2013-01-21T20:40:05.643 回答