在悬停时更改引导下拉菜单的背景 [英] Changing the background for bootstrap dropdown a on hover

问题描述

我使用了导航div中的引导下拉菜单，而且我想更改悬停时子菜单链接的颜色。没有我试图工作，我不能理解它。即使尝试从Chrome控制台运行的东西，它也没有任何效果。

I am using bootstrap's dropdown from a navigation div, and I'd like to change the color of the the sub-menu links on hover. Nothing I'm attempting works, and I can't make sense of it. It's not having any effect even when trying to run things from the chrome console.

我创建了一个css文件，其中覆盖默认值。正常 a 标记的背景更改工作，但悬停不会。这是为什么？我也尝试影响 li 并使用！important ，但没有任何效果。

I have created a css file where I override the defaults. The background change for normal a tags work, but the hover doesn't. Why is that? I also tried affecting the li and using !important, but none of that is having any effect.

我使用Bootstrap 3.1.1。这是我的css：

I'm using Bootstrap 3.1.1. Here's my css:

.dropdown-menu > li > a {
    color: white; /* This has an effect */
}

.dropdown-menu > li > a:hover {
    background-color: red; /* This doesn't... why? */
}

并检查此 jsfiddle 进行演示（由于某种原因，您需要在结果面板完全拖动到左边之后才能看到按钮）。有任何想法吗？

And check out this jsfiddle too for a demonstration (for some reason you need to drag the result panel a whole lot to the left before you see the button). Any ideas?

编辑

请注意，我试图更改链接的背景颜色在下拉菜单中，而不是主要按钮 MyProfile 。

Note I am trying to change the background color for the links in the dropdown, not for the main button which is MyProfile.

推荐答案

Bootstrap定义元素的背景图片，删除它以使用简单的填充颜色。

只需重新定义悬停，如下所示：

Bootstrap defines a background image for the elements, remove it to use a simple fill color.
Simply redefine your hover as follows:

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

http://jsfiddle.net/sW7Dh/4/

这篇关于在悬停时更改引导下拉菜单的背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！