Question

我很确定我在这里缺少一些简单的东西;我有一个<LI>元素的集合，我在悬停时添加了一个边框（实际上改变了不透明度）。

当选择其中一个时，我使用JQuery向该元素添加一个“active”类。 .active类为元素提供蓝色边框。但是，如果该元素悬停在它上面，它仍然会添加黑色边框，或尝试。

问题：如果没有LI类，我可以以某种方式指示.active元素仅显示边框吗？

这是我正在尝试的CSS：

.overview li { border:1px solid rgba(0,0,0,0.0);} /* transparent border */

.overview li:hover{ border:1px solid rgba(0,0,0,0.8); } /* show on hover */

.overview li .active { border:1px solid rgba(51,204,204,0.9); } /* change color on active */

.overview li .active:hover { border:1px solid rgba(51,204,204,0.9); } /* trying to force border */

Answer 1

您要添加的空格" "太多

.overview li.active { border:1px solid rgba(51,204,204,0.9); } /* change color on active */

.overview li.active:hover { border:1px solid rgba(51,204,204,0.9); } /* trying to force border */

基本上，您在active的子/孙节点中寻找任何类li而不是li本身。

Answer 2

.overview li .active表示“具有”活动“类的元素，并且是li的子元素，它是具有”概述“类的元素的子元素。你的意思是“li类”活跃“，它是具有”概览“类的元素的子元素。

您需要执行.overview li.active和.overview li.active:hover，删除多余的空格。

添加活动类而不是覆盖

2 个答案: