如何更改ul列表项的悬停背景颜色

时间:2014-11-14 20:11:00

标签: html-lists

花了很多时间没有成功。重塑当前的电子商务网站以提供响应。施工现场:www.abundant-yarns.com。下图显示了我想要更改的背景。点击“我们的服务”时,我希望“我们的服务”背后的灰色活动状态为棕褐色。将鼠标悬停在菜单项上时,我希望蓝色悬停颜色为绿色。请协助这项任务。感谢

1 个答案:

答案 0 :(得分:0)

.navbar-nav>.open>a, .navbar-nav>.open>a:hover, .navbar-nav>.open>a:focus {
   color: #555;
   background-color: red;
}

这样您就可以在点击时更改灰色背景。

.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus {
    color: #fff;
    text-decoration: none;
    background-color:  black;
    background-image: -webkit-gradient(linear,left 0,left 100%,from(#428bca),to(#357ebd));
    background-image: -webkit-linear-gradient(top,#428bca,0%,#357ebd,100%);
    background-image: -moz-linear-gradient(top,#428bca 0,#357ebd 100%);
    background-image: linear-gradient(to bottom,#428bca 0,#357ebd 100%);
    background-repeat: repeat-x;
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca',endColorstr='#ff357ebd',GradientType=0);
    }

这将允许您通过调整上述规则(即:background-color)将蓝色悬停更改为您想要的任何内容。

看看这是否有帮助。

我只是在其中添加了随机颜色,以便您可以看到差异。同样,您在这里覆盖了Bootstrap核心CSS,所以请记住它将全局应用。