如何使我的整个popover背景颜色发生变化

Question

我的问题是我的popover中的箭头没有变化，它的颜色仍然是白色。

当前代码：

http://jsfiddle.net/GZSH6/19/

的CSS：

.popover {
    background: #BE7979;
    color: white;
    border-bottom-color: #BE7979;
    border-top-color: #BE7979;
    border-left-color: #BE7979;
    border-right-color: #BE7979;
}

Answer 1

您必须更改此css选择器，如下所示：

.popover.bottom > .arrow:after {
    border-bottom-color: #BE7979;     <-----------// replace white color to #BE7979
    border-top-width: 0;
    content: " ";
    margin-left: -10px;
    top: 1px;
}

.popover.top > .arrow {
   border-bottom-width: 0;
   border-top-color: #BE7979;
   bottom: -11px;
   left: 50%;
   margin-left: -11px;
}

.popover.right > .arrow:after {
   border-left-width: 0;
   border-right-color: #BE7979;
   bottom: -10px;
   content: " ";
   left: 1px;
}

.popover.left > .arrow:after {
    border-left-color: #BE7979;
    border-right-width: 0;
    bottom: -10px;
    content: " ";
    right: 1px;
}

FIDDLE

Answer 2

使用fire-bug检查箭头元素：

<div class="arrow"></div>

你可以看到如下的css：

.popover.bottom > .arrow:after {
    border-bottom-color: #BE7979;//changed the color here which was previously #FFFFFF
    border-top-width: 0;
    content: " ";
    margin-left: -10px;
    top: 1px;
}

Answer 3

在下面添加类会将其转换为所需的颜色

.popover.bottom>.arrow:after {
    border-bottom-color: #BE7979;
}