В чем разница между .hover и: hover?

Question

Я копал некоторые коды CSS, написанные кем-то, и обнаружил следующее:

li.hover, li:hover {

}

Есть ли разница между .hover и: hover?
Может быть, некоторые браузеры работают по-разному для hover?!

Answer 1

:hover является псевдо-классом , а .hover является селектором для класса hover.Эти символы (: и .) не меняют значения по сравнению с любой другой конструкцией селектора CSS: подробности см. В рекомендации W3C CSS уровня 3 .

Предположительно, естьнемного JavaScript для переключения класса hover, возможно, из-за отсутствия поддержки :hover для элементов LI в «устаревшем» браузере.Я знаю, что IE5 / 6 ( ick! ) поддерживает только :hover для ссылок, однако:

• «Современные» браузеры GUI корректно поддерживают :hover.

(И, как всегда, убедитесь, что страница не в "quirksmode": -)

Удачного кодирования.

Answer 2

.hover - это просто имя класса (возможно, используется для обозначения «что-то, что я [кодировщик] хочу выглядеть так же, как элемент поиска), тогда как :hover - это псевдо-класс, когда мышь над ним (Лично я использую .hl вместо .hover для чего-то подобного)

Answer 3

.hover - это обычное имя класса, как и любое другое имя класса, оно не имеет специального значения.
:hover - это псевдокласс hover, который вы не можете создать самостоятельно, который применяется только тогда, когда пользователь наводит указатель мыши на элемент.

Answer 4

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

Предположительно, класс добавлен JavaScript. Это может быть для совместимости (некоторые версии IE, я полагаю, IE6 или IE7, поддерживает только :hover на <a> элементах) или это может быть для дополнительных функций (например, выделение цветом).