63

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!

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Pete Wilson
  • 8,610
  • 6
  • 39
  • 51

8 Answers8

82

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)

Marc B
  • 356,200
  • 43
  • 426
  • 500
  • 6
    Yes, I'd forgotten the click-then-move-the-mouse action. Also the possibility of tabbing to a field. Thanks. – Pete Wilson May 26 '11 at 19:13
  • 4
    To avoid any confusion: "cursor" here means "caret". :) –  May 26 '11 at 19:14
  • For completeness: Not all controls have an insertion point when they're focused. Links and buttons can also have focus. – Peeja Nov 12 '13 at 22:25
  • 1
    The answer you gave led me to a solution for a similar problem that included the "click and drag away". Using a:focus and a:hover were not sufficient. I had to use "a:hover:focus" to ensure that I had both true! – Dan Bailiff Jan 24 '14 at 19:36
  • a:hover and a:focus is the same thing? (since you can not be inside an a element) – paulalexandru May 03 '17 at 08:20
12

: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?

recursive
  • 83,943
  • 34
  • 151
  • 241
8

The different between :hover and :focus is:

:hover when your mouse pointer is on the element.

:focus when you select an element, the element gets into the focus.

More Information: CSS Pseudo Classes at W3Schools

Scribblemacher
  • 1,518
  • 1
  • 16
  • 31
Vishal Nagda
  • 1,165
  • 15
  • 20
1

Hover you can add with % percentages with transition timing with the new css3 technology. Expect IE9 all major browsers will support them. here are some samples of two navigation menus to understand hover and animation on hover and also the fading of the colors in css3 hover attribute. `

Andrew Barber
  • 39,603
  • 20
  • 94
  • 123
chumego
  • 11
  • 1
  • I've removed your non-disclosed links to your own blog. Please see the Self-Promotion area of the FAQ before posting any more answers. – Andrew Barber Nov 11 '12 at 02:52
1

hover only applies when the pointing device is over the element. The doc makes that quite clear.

spender
  • 117,338
  • 33
  • 229
  • 351
0

Hover is particularly about Mouse Pointer:

Example when Mouser pointer is over / (on the) Button, for that button hover is true.

Focus is about the highlighting element:

Usually when we use tab key to change the focus of an element.

Siluveru Kiran Kumar
  • 699
  • 1
  • 10
  • 16
0

There is a "contrasting difference" between the two:

Hover-When your mouse pointer hover(wave or float) over a particular element.

and

Focus-When you select an element,then the element gets into focus.

Shridhar Chouksey
  • 379
  • 4
  • 5
0

The main difference between these two things i.e. hover and the focus is:

hover:- when you take your mouse pointer is on the particular element such as button, text-field etc.

focus:- when you select an element or click an event that time it changes its original state and looks different.

Akash Agrawal
  • 1
  • 1
  • 1
    This is already present in the other answers just with different words. Would you care to reason why this is better than the other answers? – Peter Krebs Jan 06 '22 at 12:21