bootstrap navbar下拉菜单悬停颜色崩溃不起作用

时间:2018-01-16 15:47:27

标签: html css twitter-bootstrap

我有这个CSS代码

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

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

1 个答案:

答案 0 :(得分:0)

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

如果你有两个或更多的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;
}
相关问题