引导程序导航栏下拉菜单悬停颜色折叠不起作用

Question

我有这个CSS代码

.dropdown-menu > li > a:hover {
    background-color: #85E6FF;
    background-image: none;
}

当窗口最大化时，它工作正常，我的下拉菜单在悬停时获得 #85E6FF 的颜色。但是当折叠时(例如在我的手机上(，悬停和单击时都没有颜色变化。我该如何解决这个问题？

Answer 1

这是因为引导程序样式具有比您用于移动版本的选择器更具体的选择器。

当您有两个或多个 CSS 块，其选择器选择相同的元素，并且都尝试设置相同的属性时，则具有更具体选择器的块将胜出。

检查这个：

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

https://www.sitepoint.com/css-selectors-specificity/

您可以使用 ！important，也可以使用更具体的选择器，例如：

.navbar-default .navbar-nav .open .dropdown-menu>li>a:hover {
    background-color: #85E6FF;
    background-image: none;
}