css pseudo classes and div style

Hi all,

Trying to change the properties of Js_CardColmns_On but only the text changes. I want the background-color and border to change too.

Any help, much appreciated.

/* unvisited link */
.Js_CardColmns_On a:link {
    color: #FF0000;
      background-color: #FF0000 !important;
      border: 6px solid #FF0000;
}

/* visited link */
.Js_CardColmns_On a:visited {
    color: #00FF00;
      background-color: #605858 !important;
      border: 6px solid #605858;
}

/* mouse over link */
.Js_CardColmns_On a:hover {
    color: #FF00FF;
      background-color: #D0BA26 !important;
      border: 6px solid #D0BA26;
}

/* selected link */
.Js_CardColmns_On a:active {
    color: #0000FF;
      background-color: #0089CC !important;
      border: 6px solid #0089CC;
}

----------------------------------------------------------------------------------------------

                  <div class="Js_CardColmns_On">
                  <a href="../REG_IMG_MGT/Tr_Update_Profile_Pic.asp?123">
                               <div>
                                    <i class="fas fa-id-card fa-4x"></i>
                               </div>
                               <div>
                                    Some Text
                               </div>
                  </a>
                  </div>