Adjunté un poco de navegación del teclado en el intervalo, todas las teclas del teclado funcionan, busque arriba, abajo, izquierda, derecha. pero al configurar el enfoque en el clic del mouse, no funciona. También intenté establecer el tiempo de setTimeout antes de establecer el enfoque, pero eso no funcionó en mi caso.
$(document).ready(function() { $(".navigate").click(function() { $(this).focus(); }); }); .box { width: 300px; height: 300px; background-color: burlywood; } .navigate { display: inline-block; width: 96px; height: 96px; margin: 2px; background-color: brown; color: white; display: flex; align-items: center; justify-content: center; } .foucs { border: 1px solid #fff !important; } .row { background-color: violet; display: flex; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="box"> <div class="row"> <span class="navigate" tabindex="1">1</span> <span class="navigate" tabindex="1">2</span> <span class="navigate" tabindex="1">3</span> </div> <div class="row"> <span class="navigate" tabindex="1">4</span> <span class="navigate" tabindex="1">5</span> <span class="navigate" tabindex="1">6</span> </div> <div class="row"> <span class="navigate" tabindex="1">7</span> <span class="navigate" tabindex="1">8</span> <span class="navigate" tabindex="1">9</span> </div> </div>Cambia tu CSS a este...
.navigate:focus { border: 1px solid #fff !important; }En vez de...
.foucs { border: 1px solid #fff !important; }