Confusion on Material Design hover and focus states combination

Question

Material Design guideline says this and it's really confusing me:

Only one state layer is applied at a time. For example, if an element is first focused and then hovered, the hover state layer will be shown only until the hover is complete, then returning to the focus state layer if the element is still focused.

Does this mean if I put the cursor during focus state makes overlay lighter?

In some Google web apps like Gmail, hover state and focus state of button doesn't exist together. When unfocused, putting cursor on button shows an overlay. However, once button is focused, putting cursor on button doesn't do anything.

But behaviors of some other page which uses material design is quite different. In some pages hover and focus overlay is completely separated.

How should a button be like on hover/focus/hover and focus states?

Answer 1

Does this mean if I put the cursor during focus state makes overlay lighter?

In the example you listed, yes. While the cursor is on the element that is in focus, it would go into the hover state (lighter). When the cursor is removed, it would return to the focus state.

This makes sense in that some users employ both keyboard and mouse navigation together. The element that is in focus via keyboard controls should still give the user some indication that the mouse pointer is also on it – hence the temporary highlight/hover state.