jquery - 悬停在 Firefox 上的 div 闪烁

Question

如何在悬停时停止此 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;
}

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一起玩。