Различия между CSS3: hover и:focus?

#css #focus #hover #css-selectors #pseudo-class

#css #фокусировка #наведение #css-селекторы #псевдокласс

Вопрос:

В документе CSS3 говорится о :hover и:focus, которые мне кажутся совершенно одинаковыми. В чем различия между ними? Чего я не вижу?

Спасибо!

Комментарии:

1. :hover и :focus были введены на уровне CSS 2, и их спецификации не были изменены в CSS3.

Ответ №1:

Наведение является «истинным», когда указатель мыши находится над элементом. Фокус имеет значение true, если курсор находится в этом элементе. При наведении курсора может быть false, а при наведении фокуса true (например, щелкните в текстовом поле, затем отведите мышь в сторону)

Комментарии:

1. Да, я забыл действие щелчка, а затем перемещения мыши. Также возможность добавления вкладок в поле. Спасибо.

2. Чтобы избежать путаницы: «курсор» здесь означает «курсор». 🙂

3. Для полноты картины: не все элементы управления имеют точку вставки, когда они сфокусированы. Ссылки и кнопки также могут иметь фокус.

4. Ответ, который вы дали, привел меня к решению аналогичной проблемы, которая включала «щелчок и перетаскивание». Использование a:focus и a:hover было недостаточным. Мне пришлось использовать «a: hover: focus», чтобы убедиться, что у меня оба значения верны!

5. a: hover и a:focus — это одно и то же? (поскольку вы не можете находиться внутри элемента a)

Ответ №2:

:hover применяется к любому элементу, над которым в данный момент находится курсор мыши. :focus относится к фокусу формы и является текущим элементом формы с фокусом. Грубо говоря, если вы начнете печатать, какой элемент вы будете заполнять?

Ответ №3:

Разница между :hover и :focus заключается в:

:hover когда ваш указатель мыши находится на элементе.

:focus когда вы выбираете элемент, он попадает в фокус.

Дополнительная информация: Псевдоклассы CSS в W3Schools

Ответ №4:

наведение применяется только тогда, когда указывающее устройство находится над элементом. В документе это совершенно ясно.

Ответ №5:

При наведении курсора вы можете добавлять проценты с учетом времени перехода с помощью новой технологии css3. Ожидайте, что IE9 будет поддерживать их во всех основных браузерах. вот несколько примеров двух навигационных меню, чтобы понять наведение и анимацию при наведении, а также исчезновение цветов в атрибуте css3 hover. `

Комментарии:

1. Я удалил ваши неразглашенные ссылки на ваш собственный блог. Пожалуйста, ознакомьтесь с разделом саморекламы FAQ, прежде чем публиковать какие-либо дополнительные ответы.

Ответ №6:

Наведение касается, в частности, указателя мыши:

Например, когда указатель мыши находится над / (на) кнопке, для этой кнопки наведение является истинным.

Фокус заключается в выделении элемента:

Обычно, когда мы используем клавишу tab для изменения фокуса элемента.

Ответ №7:

Между ними существует «контрастирующее различие«:

Hover — Когда ваш указатель мыши наводится (волнообразно или плавающе) на определенный элемент.

и

Focus -Когда вы выбираете элемент, элемент попадает в фокус.

Ответ №8:

Основное различие между этими двумя вещами, т. е. наведением и фокусом, заключается в:

наведение: — когда вы наводите указатель мыши на определенный элемент, такой как кнопка, текстовое поле и т.д.

фокус: — когда вы выбираете элемент или щелкаете событие, в этот раз оно меняет свое исходное состояние и выглядит по-другому.

Комментарии:

1. Это уже присутствует в других ответах, просто с другими словами. Не могли бы вы объяснить, почему это лучше, чем другие ответы?