What is the proper way to target the tab key 'highlight' events on an html element?

user_1753684 0
Viewed 4232

I'm trying to understand how to respond to tab key navigation, but am not sure which event is triggered when an element receives focus via the tab key .

In the code linked to below, I want all the buttons to grow to full size when the user tabs over any of them. https://codepen.io/anon/pen/YopBaz

In the example, I have the effect working with the mouse ':hover' psuedo class, but am not sure how to achieve the same effect for the tab highlighted event. I've tried watching for all ( active/ focus / hover ) events on the parent div element when the tab selection is focused on any one of it's child elements. This hasn't worked for me, so I'm wondering is there an event that perhaps bubbles up to the parent of the element highlighted with 'tab' selection?

The relevant css is:

 .speed-unit-selector .btn.active, .speed-unit-selector .btn:hover, .speed-unit-selector:active .btn,
.speed-unit-selector:hover .btn,
.speed-unit-selector:focus .btn {
  transform: scale(1, 1);
}

Thanks for any insights!

css html
2 Answers

The tab key navigation triggers the :focus event on the elements. You can also change the order in which the elements are 'focused' with tabindex="value" attribute.

Keep in mind that tab key won't focus on elements which do not support :focus event and also don't have a tabindex attribute set. For e.g if you want to be able to focus on a p element, add a tabindex to it.

see below

button:focus {
  background: red;
}
p:focus {
  background: blue;
}
<button tabindex="1">
BUtton
</button>
<button tabindex="3">
BUtton    
</button>
<button tabindex="2">
BUtton
</button>


<p tabindex="4">
aaaaaaaaaaaaaaaaa
</p>

user_64411240

Try this in your code it will work.

.speed-unit-selector .btn:focus{
  transform: scale(1, 1) !important;
  background: #fff;
  color: #000;  
  opacity: 1;
}
user_113444180
Related