Bringing a div to: active state via jquery.trigger () method

Question

I assigned a pseudo-class div a :activeCSS so that it "reacts" to clicks and tags.

   .quarter:active{
      opacity: 0.5;
   }

What I want to achieve is simulating a long click using jQuery. .trigger("click")doesn't seem to do the trick, as there is no visible discoloration. I also tried with .trigger("focus")and .trigger("mousedown"), but it seems like I messed up somewhere.

    <div id="1" class="quarter green" ></div>
    <div id="2" class="quarter red" ></div>
    <div id="3" class="quarter yellow" ></div>
    <div id="4" class="quarter blue" ></div>

Is there a way to achieve this, or do I need to use an approach toggleClass?

Edit: Thanks to nashcheez responder, I solved my problem using .trigger("focus"), and then setTimeout(...{ .blur() }). Thanks to everyone for the quick answers.

Answer 1

jQuery css. focus css tabindex html.

:

.quarter {
  height: 40px;
  width: 40px;
  display: inline-block;
  margin-right: 15px;
  cursor: pointer;
}

.quarter:focus {
  opacity: 0.5;
}

.green {
  background-color: green;
}

.red {
  background-color: red;
}

.yellow {
  background-color: yellow;
}

.blue {
  background-color: blue;
}

<div id="1" class="quarter green" tabindex="1"></div>
<div id="2" class="quarter red" tabindex="1"></div>
<div id="3" class="quarter yellow" tabindex="1"></div>
<div id="4" class="quarter blue" tabindex="1"></div>

Hide result

, opacity div .

tabindex .

Answer 2

toogleclass ,

$('.quarter').click(function(){
    $(this).toggleClass('active');
})

.quarter:active, .active{
      opacity: 0.5;
      transition: 1s all ease-in;
   }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="1" class="quarter green" >green</div>
    <div id="2" class="quarter red" >red</div>
    <div id="3" class="quarter yellow" >yellow</div>
    <div id="4" class="quarter blue" >blue</div>

Hide result

Answer 3

, :active <a> <button> ( ), div :active div, : , :focus , . active div.

. .

$('.quarter.green').trigger('focus');

.quarter:active,
.quarter:focus,
.quarter.active {
  opacity: 0.5;
  color: red;
}

.quarter:active {
  color: green
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="1" class="quarter green" contenteditable="true">1 Using contenteditable property</div>
<div id="2" class="quarter red active">2 Using active class</div>
<div id="3" class="quarter yellow">3</div>
<div id="4" class="quarter blue">4</div>

Hide result