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>

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.

LVL 51

Chris StanyonWebDevCommented: 2018-11-06

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

LVL 5

Abiel de GrootDeveloperAuthor Commented: 2018-11-07

Many thanks Chris … that did it. :-)

css pseudo classes and div style

Who is Participating?