Differences between CSS3 :hover and :focus?

孤人 提交于 2021-02-05 17:50:10

问题


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!


回答1:


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)




回答2:


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




回答3:


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




回答4:


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




回答5:


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. `




回答6:


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.




回答7:


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.



来源:https://stackoverflow.com/questions/6143782/differences-between-css3-hover-and-focus

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!