Javascript 为什么CSS悬停动画与Firefox的工作方式不同？

我想让引导菜单下拉悬停，而不是点击一些很酷的动画。所以我写了下面的代码，它在Google Chrome和Internet Explorer上运行得非常好。但它在Firefox上不起作用

if（匹配媒体）{
var mq=window.matchMedia（（最小宽度：768px））；
mq.addListener（WidthChange）；
宽度变化（mq）；
}
函数宽度更改（mq）{
if（mq.matches）{
$（函数（）{
$（'li.dropdown'）。悬停（函数（）{
$（this.addClass（'open'）；
}，函数（）{
$（this.removeClass（'open'）；
});
});
}
}

@介质（最小宽度：768px）{
下拉菜单{
不透明度：0；
过渡：所有0.2s线性；
-webkit转换：所有0.2s线性；
转换：转换（0，10px）；
-webkit转换：转换（0，10px）；
}
li.open>ul.下拉菜单{
-webkit转换：转换（0,0）；
变换：平移（0,0）；
不透明度：1；
}
li.下拉菜单：悬停ul.下拉菜单{
显示：块！重要；
}
}

切换导航

试试这段代码

if（匹配媒体）{
var mq=window.matchMedia（（最小宽度：768px））；
mq.addListener（WidthChange）；
宽度变化（mq）；
}
函数宽度更改（mq）{
if（mq.matches）{
$（函数（）{
$（'li.dropdown'）。悬停（函数（）{
$（this.addClass（'open'）；
}，函数（）{
$（this.removeClass（'open'）；
});
});
}
}

@介质（最小宽度：768px）{
下拉菜单{
不透明度：0；
过渡：所有0.2s线性；
-webkit转换：所有0.2s线性；
-moz过渡：所有0.2s线性；
转换：转换（0，10px）；
-webkit转换：转换（0，10px）；
-moz变换：平移（0，10px）；
}
li.open>ul.下拉菜单{
-webkit转换：转换（0,0）；
-moz变换：平移（0,0）；
变换：平移（0,0）；
不透明度：1；
}
li.下拉菜单：悬停ul.下拉菜单{
显示：块！重要；
}
}

切换导航

以下是一种仅使用css的方法：

CSS

@介质（最小宽度：768px）{
li.下拉菜单ul.下拉菜单{
显示：块；
不透明度：0；
左：-100000像素；
-webkit转换：转换（0，10px）；
转换：转换（0，10px）；
-webkit转换：不透明度250ms，转换250ms，左0ms 250ms；
过渡：不透明度250ms，变换250ms，左0ms 250ms；
}
li.下拉菜单：悬停ul.下拉菜单{
不透明度：1；
左：0px；
-webkit转换：转换（0,0）；
变换：平移（0,0）；
-webkit转换：不透明度250ms，转换250ms；
过渡：不透明度250ms，变换250ms；
}
}

---

根据我在Firefox 38中的测试，这对我来说很好。您使用的Firefox版本是什么

matchMedia

？如果（matchMedia）{在某些情况下不起作用，并且

WidthChange（mq）；

没有调用