Accessibility - triggering hover and focus events on TAB key press

Question

I've been dabbling in simple CSS transitions and hover events etc recently. I notice that when you press the TAB key it generally finds links which is fine but...

If I have a hover event, like a piece of text is revealed or something similar, how can I ensure that pressing the TAB key will trigger hover and or focus events?

This is because I have a page full of squares made up of DIVs that look similar to this:

When you hover over this block with your mouse it changes color via a hover event, essentially to visually inform the user that the element is in some way interactive.

Is there a way I could trigger the hover event with the TAB key or even the arrow keys? My reasoning is because if for some reason you did not have a mouse or touch device you could potentially miss out on content.

Amending my question slightly

So the TAB key is treated as a :focus event and works well when you give a link a :hover state but is it possible for the TAB key to acknowledge DIV elements?

Answer 1

With CSS you can use also :focus, try this:

div {
  float:left;
  margin:2px;
}
a {
  display:block;
  height:100px;
  width:100px;
  line-height:100px;
  text-align:center;
  background:purple;
  color:white;
  transition:.3s linear;
}
a:hover, a:focus {
  background:orange;
}      

<div><a href="">item1</a></div>
<div><a href="">item2</a></div>
<div><a href="">item3</a></div>
<div><a href="">item4</a></div>
<div><a href="">item5</a></div>