html - 修复渐变 :hover glow in Firefox

Question

我有一些 css，当悬停在元素及其下方的链接上时，它会逐渐改变元素的背景颜色。

它在 Chrome 和 IE9+ 中完美运行，但在 FF 中它仅适用于您悬停的元素，它会立即更改下方元素的颜色

EXAMPLE

我猜问题就出在这里:

.tree li {
    float: left; text-align: center;
    list-style-type: none;
    position: relative;
    padding: 20px 5px 0 5px;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
}

我需要更改/添加什么才能使其在 FF 中正常工作

Answer 1

也尝试在下面的元素上设置相同的过渡。

我猜您希望示例中的行具有相同的效果。我已经用这个 JsFiddle 更新了示例.

编辑:我将过渡 CSS 添加到所有处理用于绘制线条的边框的类

transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;