Jquery Bootstrap 3打开/关闭时的手风琴造型

正在尝试将bs3手风琴样式化。。。我在标题和正文中添加了一个图像。我已成功地将黑色标题文本设置为“关闭”，将蓝色文本设置为“悬停”和/或“打开”

如何更改悬停和/或打开时“面板标题”的背景色？我尝试过很多事情，但都没有结果。通过添加/删除样式，这将是一个只有jquery的解决方案吗

<div class="panel panel-faq">
    <div class="panel-heading">
        <h4 class="panel-title">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" href="#accordion1_2">
                1. Some title goes here
            </a>
        </h4>
    </div>
    <div id="accordion1_2" class="panel-collapse collapse">
        <div class="panel-body">
                sample entry text goes here
        </div>
    </div>
</div>


.panel-faq{
    border-color: #dddddd;
}
.panel-faq .panel-heading {
    color: #333333;
    background:#f5f5f5 url('/assets/img/faq-question.png') no-repeat 10px center;
    padding-left: 45px;
    border-color: #dddddd;
}

.panel-default > .panel-heading + .panel-collapse .panel-body {
  border-top-color: #dddddd;
}

.panel-default > .panel-footer + .panel-collapse .panel-body {
  border-bottom-color: #dddddd;
}

.panel-faq .panel-body {
    background: url('/assets/img/faq-answer.png') no-repeat 40px 20px;
    padding-left: 75px;
}

.panel-faq .accordion-toggle, .panel-faq a.accordion-toggle:hover{
    color:#428bca;
    text-decoration:none;
}

.panel-faq .accordion-toggle.collapsed {
    color:#333333;
}

这里是示例条目文本
.小组常见问题解答{
边框颜色：#dddddd；
}
.面板常见问题解答.面板标题{
颜色：#333333；
背景：#f5url（'/assets/img/faq question.png'）无重复10px中心；
左侧填充：45px；
边框颜色：#dddddd；
}
.panel默认值>.panel heading+.panel collapse.panel body{
边框顶部颜色：#dddddd；
}
.panel默认值>.panel页脚+.panel折叠.panel主体{
边框底色：#dddddd；
}
.面板常见问题解答.面板主体{
背景：url（'/assets/img/faq-answer.png'）不重复40px 20px；
左侧填充：75px；
}
。面板常见问题。手风琴切换。面板常见问题a。手风琴切换：悬停{
颜色：#428bca；
文字装饰：无；
}
.面板常见问题解答.手风琴切换.折叠{
颜色：#333333；
}

试试这个：

对于悬停效果：

.panel-faq .panel-heading:hover {

   color: #333333;    
   background:#f5f5f5 url('/assets/img/faq-question.png') no-repeat 10px center;    
   padding-left: 45px;    
   border-color: #dddddd;

}

如果后台未被覆盖，您也可以尝试：

background:#f5f5f5 url('/assets/img/faq-question.png') no-repeat 10px center !important;

---

因为我不能在css中做任何事情，所以我只能继续使用jquery。对于任何感兴趣的人，您可以向整个div添加/删除活动类，然后以这种方式应用样式

    $('.panel-faq').on('show.bs.collapse', function () {
         $(this).addClass('active');
    });

    $('.panel-faq').on('hide.bs.collapse', function () {
         $(this).removeClass('active');
    });

---

要通过AngularJS方式（无JQuery）实现这一点，您可以在

accordion组上放置一个条件类

<div accordion-group is-open="first.open"
     ng-class="{'active': first.open}">
  <div accordion-heading>First Section</div>
  <div>First content</div>
</div>


.active[accordion-group] .panel-heading {
  background-color: black;
  color: white;
}


第一节
第一内容
.active[手风琴组]。面板标题{
背景色：黑色；
颜色：白色；
}

通过这种方式，
active
类在打开时应用于整个
accordion组
，并且
面板标题
div（由引导ui生成）可以使用特定的CSS选择器设置样式。
这里是我提出的CSS唯一解决方案

jQuery解决方案不是很好，因为如果用户点击太快，样式可能会被丢弃

仅在headers类未折叠时将其作为目标：

.panel-heading:not(.collapsed) { 
/*Your styles*/
}

我拥有的HTML：

<div class="collapsed panel-header" data-toggle="collapse" data-parent="panelParent" data-target="targetPanel">Header</div>

谢谢我所能补充的是，如果您想在开始时打开一个，您需要手动将
collapse
类添加到panel div标记的HTML中。谢谢-这非常有用，我有几个面板要管理，所以我稍微修改了代码，最后得到：$（'.classofaccordion.panel'）。on（'show.bs.collapse'，function（）{$（this.addClass（'active'）；}）；$（'.classofaccordion.panel'）.on（'hide.bs.collapse'，function（）{$（this.removeClass（'active'）；}）；
.panel-heading:hover {
/*Your styles*/
}