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>
LVL 5
Abiel de GrootDeveloperAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Chris StanyonWebDevCommented:
By default, <a> tags are displayed as inline, so you'll need to change it so they display as a block-level element. Add the following to your CSS and see how you get on:

.Js_CardColmns_On a {
    display: inline-block;
}

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Abiel de GrootDeveloperAuthor Commented:
Many thanks Chris … that did it.   :-)
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.