How to keep an :active css style after clicking a link?


Tags: html,css,fonts,icons

Problem :

I need help with creating an :active style after the icon has been clicked. I am using Font-awesome icons, and can't workout how to keep the icon a certain colour after the icon has been clicked, any help would be great, Thanks

HTML Nav table:

<table width="100" border="0" align="center" cellpadding="0" cellspacing="0">
          <tr>
            <td height="59"><li><a href="#"><i class="fa fa-university fa-lg "></i></li></td>
          </tr>
          <tr>
            <td height="59"><li><a href="#"><i class="fa fa-camera-retro fa-lg"></i></li></td>
          </tr>
          <tr>
            <td height="59"> <li><a href="#"><i class="fa fa-picture-o fa-lg"></i></li></td>
          </tr>
          <tr>
            <td height="59"><li><a href="#"><i class="fa fa-comments fa-lg"></i></li></td>
          </tr>
          <tr>
            <td height="59"><li><a href="#"><i class="fa fa-tachometer fa-lg"></i></li></td>
          </tr>

The CSS to create a colour hover over:

    .fa-university:hover {
color: white;
transition: all 500ms ease-in-out;

}



Solution :

Use JavaScript:

document.getElementById("target").onclick=function () {//Detects a click on #target

  if (this.classList) {//check if classlist is supported
     this.classList.add("newcolor");//add the class
  } else {
    this.class += " newcolor";//if classlist isn't supported, add " newcolor" to the attribute value
  }
}
#target {
  width: 50px;height: 50px;
  background-color:red;
  transition: all 0.5s;
}

.newcolor {
  background-color: blue !important;
}
<div id="target">Foo</div>

This in simple terms, adds a new class with new values to the element after it has been clicked.


    CSS Howto..

    How to get rid of the border bottom from my navigation

    How can i override this css behavior with jquery?

    How to stack multiple divs on top of each other and each have a height of 100%

    How to apply first-child:first-letter to only one section?

    How to align brand title and links left in Bootstrap navbar?

    $(document).on(“click”… how to collapse a list when clicking anywhere else on the document

    CSS How to Transition from White to Background on Hover

    How to wrap two spans into one line with CSS

    How can I make a pointy arrow with a div in CSS

    how to create two divs shapes to overlay each other

    jQuery - How to make images overlap when fading in and out?

    How to define the width of a HTML element dynamically

    CSS, how to lign up 3 seperate containers side by side under a header in IE

    How to optimize CSS file for speed

    How classes work in a CSS file? [closed]

    How to set the select to have the width of the selected option

    How set the same height of divs

    How do I create a region/zone map for the web? [closed]

    How can I let div inside bootstrap colum scrollable

    Jquery: Show/hide menu with single button

    How to set the styles on “*” and pseudo states with JavaScript? [closed]

    How to “clear” a CSS fake table row?

    how to create an anchor point

    How to change a vertical css menu to a horizontal one

    How to have css hover effect affect child elements differently?

    CSS: Background in front of image - how to prevent it?

    How to change elements display order in CSS?

    jQuery .css, how to translate it into Javascript

    How to split page in half using CSS?

    How to replicate this button in CSS