Question

当我使用CSS鼠标移动时，我正在尝试将背景颜色更改为蓝色。我昨天能够做到这一点，但无知为什么它今天不工作，又回到白色。已经好几个小时了，无法弄清楚什么是错的。请注意我想用CSS做，而不是javascript。它适用于CSS。

这是截图。当我悬停在上面时，我希望那个白色的部分是蓝色的。现在我悬停时它是白色的。

我的CSS代码正常工作，鼠标悬停时将其更改为蓝色。

.dropdown-menu {
    background-color: #c1d100;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    color: #fff;
    background-color: #1a3278;
}

Code Pen

添加了密码笔。上面的代码在CSS部分第132-140行。我复制了我的确切代码，但在代码笔中，一切似乎都是默认的。黑色字体，下拉列表的白色背景。

CSS文件

@font-face {
    font-family: KenzoCustom;
    src: url('../fonts/kenzo-regular.otf');
}

body{
    /*background-color: #eaeaf4;*/
    font-family: KenzoCustom, serif;
}

.formClass{
    max-width: 350px;
    min-width: 350px;
    margin: 0 auto;
}

.img-responsive{
    margin: 0 auto;
}

.logo-marpad{
    margin-top: 40px;
    padding-bottom: 80px;
}

.form-group{
    text-align: center;
}

.input-center{
    margin: 0 auto;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open .dropdown-toggle.btn-primary {
    background-color: #c1d001;
    border-color: #c1d001;
}

.btn {
    background-color: #c1d001;
    border-color: #c1d001;
}

/* remove whitespace after navbar*/
.navbar {
    margin-bottom: 0;
}

/* navbar-custom */
.navbar-custom {
    background-color: #1a3278;
    border-color: #1a3278;
    border-radius: 0 !important;
}
.navbar-custom .navbar-brand {
    color: #1a3278;
}
.navbar-custom .navbar-brand:hover,
.navbar-custom .navbar-brand:focus {
    color: #e6e6e6;
    background-color: transparent;
}
.navbar-custom .navbar-text {
    color: #ffffff;
}
.navbar-custom .navbar-nav > li:last-child > a {
    border-right: 1px solid #14275d;
}
.navbar-custom .navbar-nav > li > a {
    color: #ffffff;
    border-left: 1px solid #14275d;
}
.navbar-custom .navbar-nav > li > a:hover,
.navbar-custom .navbar-nav > li > a:focus {
    color: #c0c0c0;
    background-color: transparent;
}
.navbar-custom .navbar-nav > .active > a,
.navbar-custom .navbar-nav > .active > a:hover,
.navbar-custom .navbar-nav > .active > a:focus {
    color: #c0c0c0;
    background-color: #14275d;
}
.navbar-custom .navbar-nav > .disabled > a,
.navbar-custom .navbar-nav > .disabled > a:hover,
.navbar-custom .navbar-nav > .disabled > a:focus {
    color: #cccccc;
    background-color: transparent;
}
.navbar-custom .navbar-toggle {
    border-color: #dddddd;
}
.navbar-custom .navbar-toggle:hover,
.navbar-custom .navbar-toggle:focus {
    background-color: #dddddd;
}
.navbar-custom .navbar-toggle .icon-bar {
    background-color: #cccccc;
}
.navbar-custom .navbar-collapse,
.navbar-custom .navbar-form {
    border-color: #14265b;
}
.navbar-custom .navbar-nav > .dropdown > a:hover .caret,
.navbar-custom .navbar-nav > .dropdown > a:focus .caret {
    border-top-color: #c0c0c0;
    border-bottom-color: #c0c0c0;
}
.navbar-custom .navbar-nav > .open > a,
.navbar-custom .navbar-nav > .open > a:hover,
.navbar-custom .navbar-nav > .open > a:focus {
    background-color: #14275d;
    color: #c0c0c0;
}
.navbar-custom .navbar-nav > .open > a .caret,
.navbar-custom .navbar-nav > .open > a:hover .caret,
.navbar-custom .navbar-nav > .open > a:focus .caret {
    border-top-color: #c0c0c0;
    border-bottom-color: #c0c0c0;
}
.navbar-custom .navbar-nav > .dropdown > a .caret {
    border-top-color: #ffffff;
    border-bottom-color: #ffffff;
}
@media (max-width: 767px) {
    .navbar-custom .navbar-nav .open .dropdown-menu > li > a {
        color: #ffffff;
    }
    .navbar-custom .navbar-nav .open .dropdown-menu > li > a:hover,
    .navbar-custom .navbar-nav .open .dropdown-menu > li > a:focus {
        color: #c0c0c0;
        background-color: transparent;
    }
    .navbar-custom .navbar-nav .open .dropdown-menu > .active > a,
    .navbar-custom .navbar-nav .open .dropdown-menu > .active > a:hover,
    .navbar-custom .navbar-nav .open .dropdown-menu > .active > a:focus {
        color: #c0c0c0;
        background-color: #14275d;
    }
    .navbar-custom .navbar-nav .open .dropdown-menu > .disabled > a,
    .navbar-custom .navbar-nav .open .dropdown-menu > .disabled > a:hover,
    .navbar-custom .navbar-nav .open .dropdown-menu > .disabled > a:focus {
        color: #cccccc;
        background-color: transparent;
    }
}
.navbar-custom .navbar-link {
    color: #ffffff;
}
.navbar-custom .navbar-link:hover {
    color: #c0c0c0;
}

.navbar-brand-padding{
    padding: 15px 15px;
}


/* Nav bar drop-down #c1d100 is main BG Green, #fff is text-color, Text BG is #1a3278 blue */
.dropdown-menu {
    background-color: #c1d100;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    color: #fff;
    background-color: #1a3278 !important;
}

/* Remove border for navbar element*/
.navbar-custom .navbar-nav > li > a,
.navbar-custom .navbar-nav > li:last-child > a {
    border: none;
}

/* Change logo and navbar size when screen size below 768px */
@media only screen and (max-width: 768px) {

    #logo-img img{
        width: 126px;
        height: 30px;
    }

    .navbar-fixed-top{
        position: relative;
    }

    .navbar-fixed-top{
        margin-left: inherit;
    }
}

@media only screen and (min-width: 768px) {
    .navitem-margin{
        float: left;
    }

    .navbar-font-sz{
        font-size: 24px;
        padding-right: 10px;
    }

    .navbar {
        min-height:210px;
    }

    .logout-margin{
        margin-bottom: 50px;
    }

    .navbar-fixed-top{
        margin-left: 1200px;
    }
}

Answer 1

问题在于文件的优先顺序。引导程序按照自己的风格加载。

该解决方案正在审核加载订单或在您的规则中应用!important：

http://codepen.io/anon/pen/adaBZY?editors=1100

Answer 2

BootStrap CSS正在覆盖您的CSS。最好的选择是让您的地址更具体。在CSS 下方使用我刚在类名

之前添加了ul

ul.dropdown-menu {
    background-color: #c1d100;
}

ul.dropdown-menu > li > a:hover,
ul.dropdown-menu > li > a:focus {
    color: #fff;
    background-color: #1a3278;
}

您也可以使用!important，但这不合理。我尽量避免使用!important。
感谢

无法更改鼠标的颜色

2 个答案: