CSS翻译会导致打字错误

我试图给我在网站上使用的菜单添加效果。 该效果是添加了颜色更改的列表中的第一个：

但是当我尝试将它应用到我的案例中时，我遇到了一个奇怪的问题，它发生在未悬停的元素上。您可以看到，在元素上悬停期间，未悬停的元素会更改不透明度和字体大小

我在这里添加了演示：

a{
文字装饰：无；
}
/*效果15：缩小比例，显示*/
.cl-effect-15A{
颜色：#FFF；
文本阴影：无；
}
.cl-effect-15A：：之前{
右边距：10px；
内容：“[”；
-webkit转换：translateX（20px）；
-moz变换：translateX（20px）；
转换：translateX（20px）；
}
.cl-effect-15A:：之后，.cl-effect-15A:：之前{
显示：内联块；
不透明度：0；
-webkit转换：-webkit转换0.3s，不透明度0.2s；
-moz变换：-moz变换0.3s，不透明度0.2s；
过渡：变换0.3s，不透明度0.2s；
字体大小：12px；
}
.cl-effect-15A：：之后{
左边距：10px；
内容：']'；
-webkit转换：translateX（-20px）；
-moz变换：translateX（-20px）；
转换：translateX（-20px）；
}
.cl-effect-15a:hover:：before、.cl-effect-15a:hover:：after、.cl-effect-15a:focus:：before、.cl-effect-15a:focus:：after{
不透明度：1；
-webkit转换：translateX（1px）；
-moz变换：translateX（0px）；
转化：translateX（1px）；
字体大小：14px；
}
.totblockhtml.html_2{
垫底：10px；
边缘底部：0px；
}
.totblockhtml.html_2{
边缘底部：0px；
填充底部：9px；
垫面：4px；
宽度：100%；
浮动：左；
背景：无重复滚动0 0#282F47；
利润上限：-20px；
背景图像：url（../img/BlueJean.svg）；
}
.totblockhtml.html_2.block_内容{
文本对齐：居中；
颜色：#阿巴巴；
垫面：5px；
}
.totblockhtml.html_2 ul li{
显示：内联块；
左边距：70像素；
字体大小：14px；
字体系列：“trajanpro_常规”；
文本转换：大写；
字母间距：1px；
位置：相对位置；
}
.totblockhtml.html_2 ul li：第一个孩子{
左边距：0px；
}
.totblockhtml.html_2 ul li a{
颜色：#9099AF；
字体大小：11px；
字体系列：“Cinzel”；
文本转换：大写；
字母间距：2px；
-webkit过渡：颜色0.5s轻松；
-moz过渡：颜色0.5s轻松；
-ms过渡：颜色0.5s；
-o型过渡：颜色0.5s；
过渡：颜色0.5s；
}
.totblockhtml.html_2 ul li a:悬停{
文字装饰：无；
颜色：#fff；
}

以下是更改不透明度的代码：

.cl-effect-15 a::after, .cl-effect-15 a::before {
    -webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
    -moz-transition: -moz-transform 0.3s, opacity 0.2s;
    transition: transform 0.3s, opacity 0.2s;
}

下面是更改字体大小的一个：

.cl-effect-15 a:hover::before, .cl-effect-15 a:hover::after, .cl-effect-15 a:focus::before, .cl-effect-15 a:focus::after {
    font-size: 14px;
}

---

我将字体大小设置为12px，不透明度设置为1，在这里查看：

它在Chrome37中运行良好-在什么浏览器上有问题？在FireFox 24.0上一切都运行良好。可能是重复的