Html 为什么我的.tabs li:hover属性停止工作？

我的页面不再将：悬停效果应用于我的.tabs li元素，但我一辈子都不知道为什么。我注释掉了我的jQuery脚本，但它仍然无法工作

下面是一个JSFIDLE：

表1
表2
表3
表4

#标签容器{
浮动：左；
宽度：100%；
溢出：隐藏；
}
.标签{
填充：0px；
列表样式：无；
清除：左；
浮动：左；
左：50%；
}
李先生{
显示：块；
浮动：左；
右：50%；
保证金：0；
填充：10px 20px 5px 20px；
光标：指针；
字体大小：1.1米；
线高：2米；
-webkit过渡：颜色。2s线性；
-moz过渡：颜色。2s线性；
-ms转换：彩色。2s线性；
-o-过渡：颜色。2s线性；
过渡：颜色。2s线性；
-webkit转换：背景。2s线性；
-moz跃迁：背景。2s线性；
-ms转换：背景。2s线性；
-o-转变：背景。2s线性；
过渡：背景。2s线性；
}
.李：悬停{
背景：#88abc2！重要；
}
.tabs li.current{
背景：#d0e0eb；
颜色：#49708a；
}
.选项卡内容{
显示：无；
填充：15px；
线高：1.4；
}
.tab-content.current{
显示：继承；
}

---

谢谢。

您的

.tab内容

与

.tabs容器

重叠，因此您所做的任何：悬停操作实际上都注册为

.tab内容

元素上的悬停

解决这个问题的两个选项

使用

页边距顶部

.tab-content.current {
    display: inherit;
    margin-top: 60px;
}

从

#选项卡容器中删除
float:left

---

您的

.tab内容

与

.tabs容器

重叠，因此您所做的任何：悬停操作实际上是注册为

.tab内容

元素上的悬停

解决这个问题的两个选项

使用

页边距顶部

.tab-content.current {
    display: inherit;
    margin-top: 60px;
}

从

#选项卡容器中删除
float:left