He asignado a un div una pseudo clase :active CSS, para que sea "receptivo" en clics y retenciones.
.quarter:active{ opacity: 0.5; } Lo que quiero lograr es simular un clic largo con JQuery. El .trigger("click") no parece funcionar ya que no hay decoloración visible. También probé con .trigger("focus") y .trigger("mousedown") pero parece que me equivoqué en alguna parte.
<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> ¿Hay alguna manera de lograr eso o tengo que usar un enfoque de toggleClass ?
Editar: gracias a la respuesta de nashcheez , resolví mi problema usando .trigger("focus") seguido de setTimeout(...{ .blur() }) . Gracias a todos por las rápidas respuestas.
Puedes hacerlo sin jQuery y en puro css . Simplemente puede proporcionarle un estado de focus en css y un atributo tabindex en el html.
Código de referencia:
.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> De esta manera, su opacity persiste al hacer clic en el div y vuelve al valor normal al hacer clic en cualquier lugar fuera.
Lea más sobre el atributo tabindex aquí .
En general, :active se puede aplicar a elementos <a> o <button> (ya que se puede hacer clic en ellos), para hacer un div :active primero debe hacer clic en div, luego estará en :estado activo , también en el mismo En caso de que pueda usar :focus en este elemento para mostrarlo como activo. Segunda opción, puede usar la clase active y agregarla en un div particular.
Vea el siguiente fragmento con su funcionamiento.
$('.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>En caso de que quiera usar toogleclass con transiciones, esto puede funcionar
$('.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>