Menu
The CSS3 doc talks about :hover and :focus, which seem exactly the same to me. What are the differences between the two? What am I not seeing?
Thanks!
208
Typically, a user will first hover over an element, then bring it to focus, then activate it. So, the best way to order your pseudo-class styles are :hover then :focus then :active .
Hover: It is the state that occurs by putting your cursor over the button. You cannot see this state using the keyboard. Active: Very simply, it is the state of an element that is active. For example, in our example, it is the state of interacting with the button.
:focus is when an element is able to accept input - the cursor in a input box or a link that has been tabbed to. :active is when an element is being activated by a user - the time between when a user presses a mouse button and then releases it.
The :focus CSS pseudo-class represents an element (such as a form input) that has received focus. It is generally triggered when the user clicks or taps on an element or selects it with the keyboard's Tab key.
Hover is 'true' when the mouse pointer is over an element. Focus is true if the cursor is in that element. It's possible for hover to be false and focus true (e.g click in a text field then move the mouse away)
113
:hover applies to any element that the mouse cursor is currently over. :focus refers to form focus, and is the current form element with focus. Roughly speaking, if you start typing, which element will you be filling?
27
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
