Cannot focus in a box using CSS

Question

I tried adding the :active function to a div in the hopes of forcing it to stay the same color after the hover effect wears off. When they click on the box, the box should remain as that color, and when they click again, the color goes back to normal.

The problem is, the box changes back to it's original color despite being clicked.

Do I need Javascript for this?

.faqOuter{
	color: #878787;
	background-color: #E7E7E7;
	transition: all 0.3s ease;
	
	font-family: "Raleway", Sans-Serif;
	font-weight: 500;
	text-align: center;
	font-size: 20px !important;
	
	height: 30px;
	
	padding: 4px 0 5px 0;
	
	position: absolute !important;
	z-index: 1;

}

.faqOuter:hover{
	color: #fff;
	background-color: #262626;
}

.faqOuter:active{
	color: #fff;
	background-color: #262626;
}

   <h4 class="faqOuter col-md-8 col-md-offset-2">Trial One Bar</h4>

Answer 1

Problem:

The :active and :focus CSS pseudo-classes won't behave as intended since these pseudo-classes are typically used for form elements, and are intended to behave as described below accordingly:

:active

The :active CSS pseudo-class represents an element (such as a button) that is being activated by the user. When using a mouse, "activation" typically starts when the user presses down the primary mouse button and ends when it is released.

Ref: :active - CSS | MDN

:focus

The :focus CSS pseudo-class represents an element (such as a form input) that has received focus. It is generally triggered when the user clicks or taps on an element or selects it with the keyboard's "tab" key.

Ref: :focus - CSS | MDN

Solution:

To achieve the intended behaviour, consider javascript solutions and applying the required changes using classes rather than inline styles - this allows for greater control over applied changes and circumvents specificity issues typically encountered with inline styles.

Vanilla Javascript:

For best practice, and to bind the click event only to the intended element, add an id attribute and get the element by referencing this unique identifier.

Code Snippet:

// Add event listener to element in question and detect the click event
document.getElementById('faqOuter').addEventListener('click', function () {
  // Check the class with conditional if statement
  if (this.classList.contains('active')) {
    // The element in question already has the class `active`, so we remove it
   this.classList.remove('active');
  } else {
    // The element inb question does not have the class `active`, so we add it
   this.classList.add('active');
  }
});

.faqOuter{
	color: #878787;
	background-color: #E7E7E7;
	transition: all 0.3s ease;
	
	font-family: "Raleway", Sans-Serif;
	font-weight: 500;
	text-align: center;
	font-size: 20px !important;
	
	height: 30px;
	
	padding: 4px 0 5px 0;
	
	position: absolute !important;
	z-index: 1;

}

.faqOuter:hover{
	color: #fff;
	background-color: #262626;
}

/* Additional */
.active {
	color: #fff;
	background-color: #262626;
}

<h4 id="faqOuter" class="faqOuter col-md-8 col-md-offset-2">Trial One Bar</h4>

jQuery:

Alternatively, the jQuery library can be included using a CDN (content delivery network), allowing for a range of more intuitive and flexible jQuery methods to be applied.

Code Snippet:

// Add event listener to element in question and detect the click event using the .on() method
jQuery('.faqOuter').on('click', function(){
  // Toggle the class of the element in question using the .toggleClass() method
  jQuery(this).toggleClass('active');
});

.faqOuter{
	color: #878787;
	background-color: #E7E7E7;
	transition: all 0.3s ease;
	
	font-family: "Raleway", Sans-Serif;
	font-weight: 500;
	text-align: center;
	font-size: 20px !important;
	
	height: 30px;
	
	padding: 4px 0 5px 0;
	
	position: absolute !important;
	z-index: 1;

}

.faqOuter:hover{
	color: #fff;
	background-color: #262626;
}

/* Additional */
.active {
	color: #fff;
	background-color: #262626;
}

<!-- Remmeber to include jQuery Library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h4 class="faqOuter col-md-8 col-md-offset-2">Trial One Bar</h4>

Answer 2

You need to use script for this and toggle the style on each click to get the effect.

First add a class with the desired style and use it to toggle during each click, as given below.

.hover-change {
    color: #fff;
    background-color: #262626;
}

$('.faqOuter').on('click', function(){
    $(this).toggleClass('hover-change');
});