Differences between CSS3 :hover and :focus?

css focus hover css-selectors pseudo-class
Pete Wilson picture Pete Wilson · May 26, 2011 · Viewed 45.7k times · Source

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!

Answer

Marc B picture Marc B · May 26, 2011

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)

Related questions

How to remove focus border (outline) around text/input boxes? (Chrome)

Can anyone explain how to remove the orange or blue border (outline) around text/input boxes? I think it only happens on Chrome to show that the input box is active. Here's the input CSS I'm using: input { background-color: transparent; …

Read More
How to reset / remove chrome's input highlighting / focus border?

I have seen that chrome puts a thicker border on :focus but it kind of looks off in my case where I've used border-radius also. Is there anyway to remove that?

Read More
CSS Input field text color of inputted text

I have an input field, and the color of the text in it is black. (I'm using jquery.placeholder) Let's say the text in there is "E-Mail" When you click on this field, the black placeholding text dissapears (thanks to …

Read More