Можете ли вы изменить цвет карты div / bootstrap после нажатия на ссылку, которая оборачивает ее и вызывает коллапс?

Question

Я пытаюсь использовать карты bootstrap (v4.3.1), чтобы пользователи могли быстро просматривать дополнительную информацию о топи c, просто щелкнув карту (карта-A), после чего появляется карта-B с дополнительной информацией. используя коллапс с переключением данных. Это прекрасно работает, но мне также нужна карта A, чтобы изменить ее цвет bg после того, как она была нажата (: посещена), чтобы помочь пользователю отслеживать то, что они уже просмотрели. Это действительно сложно, так как я хотел бы сделать это без использования JS, как предлагали другие посты S / O.

Я пробовал: 1) Оборачивать div (карту-A) в ссылку, которая вызывает сбой - не работает. 2) Обтекание div "card-body" card-A в ссылке, которая вызывает коллапс (пример ниже). 3) Использование класса 'stretched-link' для ссылки и размещение его внутри карты-A - не работает. 4) И используя ссылку переключения данных, чтобы обернуть div внутри карты-A и просто изменить цвет этого дочернего div - он не работает для: посещенных, но он работает (временно) для: focus - но после нажатия другой элемент возвращается в состояние по умолчанию.

Нужно ли использовать JS или есть другое решение bootstrap, которое я могу использовать? Код ниже.

<!-- card-A -->
  <div class="card border-0"> 
   <a class="mylink" data-toggle="collapse" href="#collapseExample2222" role="button" aria-expanded="false" aria-controls="collapseExample2222">
             <div class="mycard-body">
                <div class="mycontainer">
                  <div class="row">
                    <div class="col-1 ">
                    <!-- a bunch of columns with divs, text and a single image -->
                       <div class="">                 
                        <h4> Here's some text for examples sake</h4>
                       </div>
                     </div>
                  </div>
              </div>
         </div>
       </a>
     </div>


 <!-- card-B -->
            <div class="collapse multi-collapse" id="collapseExample2222">
              <div class="card card-body border-0">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad 
                Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea 
              </div>
            </div>

стиль. css ниже:

.mycard-body{-ms-flex:1 1 auto;
  flex:1 1 auto;
  padding:1.25rem;
  background-color: white;}
.mycard-body:hover {
  background-color: #f0f4f4;
}
.mylink:link {
  /* background-color: #f0f4f4; */
}
.mylink:visited .mycard-body {
  background-color: #f0f4f4;
}