What is that way when on a tag need :hover and :focus

HTML-CSS
1

So both?

I see on emulator :hover works on mobile when hover on click. What ways need :focus also? Like on forms is basic because user click into it?

Thanks

2

Well, as far as I know the difference is that :hover applies for when a users hovers over an element with a mouse, but doesn’t click it. Most of the touch-devices like smartphones translate a tab on the screen as a :hover, although it’s not. It’s just a convenience.

:focus on the other hand is when a certain element is focused with the keyboard or activated by clicking on it. So if you are within a form, you can use the TAB key to change input fields and if you use the :focus pseudo-selector correctly in your CSS, you will see a different styling.

<style>
input:hover {
  background-color: red; /* This applies when you hover your mouse over or tab on a touch screen */
}

input:focus {
  background-color: blue /* This applies when you click on the input or select it with the keyboard */
}
</style>
<input type="text">

There’s a good article about :focus on CSS-Tricks.

1 Like
3

So basicly a tag no need a:focus just another link visited hover and active. As I understand thanks.

4

It depends on what you want. There are designs that make use of :focus, for example in forms or on links. In general, it is a best practice to use :focus for accessibility and UX.