Is there a visible difference between hover and focus?

Should I be noticing a visible difference between hover and focus, and if so, what should I be looking at?

Is one of these more correct?

.videoPoster:hover:before,
.videoPoster:hover:before {
  border-color: #f00;
}

.videoPoster:hover:after,
.videoPoster:hover:after {
  border-left-color: #f00;
}

When you add focus, what exactly is being said there?

.videoPoster:hover:before,
.videoPoster:focus:before {
  border-color: #f00;
}

.videoPoster:hover:after,
.videoPoster:focus:after {
  border-left-color: #f00;
}

Focus is the thing the browser is currently interfacing with; While you’re typing in the text box to reply to this post, the box is the Focus of the browser. I can move my mouse and hover over other things, but while the cursor is still blinking in the text box, the text box still has focus.

As a general rule, the last interactive thing you clicked on on a page has Focus. The thing your mouse currently is above is being Hovered.

1 Like

Adding a :focus rule to match your :hover rule is important to cater for anybody using the keyboard to navigate. If you tab from link to link, you need to be able to see which link currently has focus, or it becomes difficult / impossible to interact with the page.

4 Likes

That’s what I just read too.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.