Bootstrap 5 用css改变打开手风琴的按钮文本颜色

Question

我想在手风琴打开但未悬停时更改按钮内 div 内文本的外观（颜色）。当手风琴打开时，我已经能够在悬停时改变文本的颜色，但是一旦我不再悬停在文本上并且手风琴打开，文本颜色再次变为灰色而不是保持红色。当手风琴面板打开但没有悬停时，我正在寻求帮助以保持按钮内文本的颜色。 IE。当悬停并且手风琴打开时，颜色为深红色，当手风琴打开但未悬停时，我希望它保持深红色。当手风琴折叠时，我希望文本为灰色。手风琴面板打开时的悬停标题（div.btn_inner-银色）文本颜色悬停时显示的文本颜色。

关闭时的显示方式

悬停时文本的显示方式

uncollapsed/open

时的显示方式

我希望它在 open/uncollapsed

时如何显示

HTML 加价

<div class="accordion" id="acrd_sidebar1-14">
<!--   DATE/TIME   -->
<div class="accordion-item">
<h2 class="accordion-header" id="hdr_timestamp1-14">
   <button type="button" aria-expanded="true" data-mdb-toggle="collapse" data-mdb-target="#collapsetimestamp1-14" aria-controls="collapsetimestamp1-14" class="accordion-button pd_all8 btn_sidebar-brand">
      <div class="btn_inner-silver" >
         Date + Time
      </div>
   </button>
</h2>

CSS

.btn_inner-silver {
    width: 100%;
    margin: 0;
    padding: 8px;
    border: 1px solid silver!important;
    background: white;
    text-align: center!important;
    font-weight: 400;
    color: silver;
}

.btn_inner-silver:hover {
    color: #981e21;
}

.btn_inner-silver collapsed {
    color: #981e21;
}

h2.accordion-header button.accordion-button.btn_sidebar-brand div.btn_inner-silver collapsed:focus {
    color: pink!important;
}

问题摘要

当选定的手风琴面板为[=47=时，如何保持文本的颜色为红色 ]打开/未折叠?

我尝试了很多方法，但无法定位到打开状态。我用谷歌搜索了很多，筛选了堆栈，反复试验并失败了。希望得到帮助。我是新手

Answer 1

首先，您似乎在下面的规则中缺少 collapsed 前面的 .。

.btn_inner-silver collapsed {
    color: #981e21;
}

其次，在Accordion example here, they are using the CSS pseudo-class:not()中定位到没有.collapsedclass的元素。

所以我认为你应该是这样的：

.accordion-button:not(.collapsed) .btn_inner-silver{
    color: #981e21;
}

Bootstrap 5 用css改变打开手风琴的按钮文本颜色

Bootstrap 5 alter button text color of open accordion with css

button

accordion

bootstrap-5

textcolor