Question

如果这个div在盘旋时如何停止闪烁，它只在firefox中出现问题，chrome很好

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;
}

Answer 1

它没有那么闪烁，因为它正在丢失悬停事件。 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玩的。

Answer 2

我会将圆圈放在中间并将其均匀地展开到所有侧面。然后闪烁效应不会发生：

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>

Fiddler：http://jsfiddle.net/eNabK/

我不知道这适用于你。

悬停firefox上闪烁的div

2 个答案: