Bootstrap5使用css更改打開手風琴的按鈕文本顏色-有解無憂

當手風琴打開但未懸停時，我想更改按鈕內 div 內文本的外觀（顏色）。當手風琴打開時，我已經能夠在懸停時更改文本的顏色，但是一旦我不再懸停在文本上并且手風琴打開時，文本顏色將再次變為灰色而不是保持紅色。當手風琴面板打開但未懸停時，我正在尋求幫助以保持按鈕內文本的顏色。IE 當懸停在手風琴打開時，顏色為深紅色，當手風琴打開但未懸停時，我希望它保持深紅色。當手風琴折疊時，我希望文本是灰色的。手風琴面板打開時的懸停標題 (div.btn_inner-silver) 文本顏色懸停時出現的文本顏色。

關閉時如何顯示

Bootstrap 5 使用 css 更改打開手風琴的按鈕文本顏色

懸停時文本如何顯示

Bootstrap 5 使用 css 更改打開手風琴的按鈕文本顏色

展開/打開時的顯示方式

Bootstrap 5 使用 css 更改打開手風琴的按鈕文本顏色

我希望它在打開/展開時如何顯示

Bootstrap 5 使用 css 更改打開手風琴的按鈕文本顏色

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;
}

問題摘要

如何保持的彩色文本顯示為紅色時，選擇的手風琴面板是打開/未折疊的？

我已經嘗試了很多東西，但我無法定位到打開狀態。我在谷歌上搜索了很多，在堆疊中篩選，反復試驗和失敗。希望得到幫助。我是新手。

uj5u.com熱心網友回復：

首先，您似乎錯過了下面規則.中的前面collapsed。

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

其次，在此處的Accordion 示例中，他們使用CSS 偽類 :not()來定位沒有該類的元素.collapsed。

所以我認為它看起來像這樣：

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/402226.html

標籤：按钮手风琴 bootstrap-5 文字颜色

上一篇：如何在與內容重疊的SwiftUI按鈕上方添加漸變？iOS13

下一篇：如何獲取tkinter中按鈕的狀態？