Что такое hover в css

Что означает hover .

С помощью hover в css — можно задать поведение html-тега, например:

Есть какая-то ссылка:

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

это псевдокласс(hover), которым можно изменять состояние элемента(например ссылки a), к которому он применен(a:hover), при наведение на него курсора (на ссылку а), можно менять цвет, размер, делать, чтобы возникала вокруг рамка, в общем любая фантазия средствами css

Как использовать 'hover' в CSS

Я использовал приведенный ниже код для достижения этой цели:

При наведении курсора мыши на anchor появляется подчеркивание,

но это не сработало,

Какая правильная версия для этого?

9 ответов

Что лучше для скорости сайта, CSS: hover или jQuery hover? Или это примерно одно и то же?

Следующий код не применяется к классам CSS с :hover , но применяется ко всему остальному. Во всяком случае , чтобы заставить его работать с классами CSS, которые имеют :hover , или с любыми псевдоклассами, если на то пошло? $(‘.nav-sidebar, .nav-sidebar:hover’).css(border-color, blue);

Если вы хотите, чтобы подчеркивание присутствовало при наведении курсора мыши на ссылку, то:

достаточно, однако вы также можете использовать имя класса ‘hover’, если хотите, и следующее будет в равной степени применимо:

Кстати, возможно, стоит отметить, что имя класса ‘hover’ на самом деле ничего не добавляет к элементу, так как psuedo-элемент a:hover делает то же самое, что и a.hover:hover . Если только это не просто демонстрация использования имени класса.

Есть много способов сделать это. Если вы действительно хотите иметь класс ‘hover’ в своем элементе A, вам придется сделать:

Опять же, это необычно, чтобы там был такой className, вот как вы делаете обычное наведение:

Вот еще несколько примеров:

:hover-это один из многих псевдоклассов.

Например, вы можете изменить стиль элемента, управлять им при наведении на него курсора мыши, при щелчке по нему и при предыдущем щелчке.

Помимо неудобных цветов, которые я привел в качестве примеров, ссылка с классом ‘home’ по умолчанию будет красной, зеленой, когда мышь наведет на них курсор, синей, когда они будут нажаты, и черной после того, как они были нажаты.

Надеюсь, это поможет

Не ответ, а объяснение того, почему ваш css не соответствует HTML.

В css пространство используется в качестве разделителя, чтобы указать браузеру, чтобы он смотрел в дочерних элементах, поэтому ваш css

означает "найдите элемент, затем найдите его потомков, у которых есть класс наведения, и посмотрите на всех потомков тех потомков, у которых есть состояние наведения" и будет соответствовать этому markup

Если вы хотите сопоставить < a >I will become underlined when you hover on me</a> , вы должны использовать a.hover:hover , что означает "ищите любой элемент с наведением класса и с состоянием наведения"

Как использовать hover css с изображением круга ? Я хочу, чтобы при наведении курсора на изображение черного круга оно меняло изображение красного круга ? Но в моем коде при наведении курсора на div изображение черного круга будет изменено изображение красного круга Fiddle .test < background.

Поскольку у меня есть динамический добавленный контент, мне нужно использовать document в качестве селектора для моего события. $(document).hover(function() < //Do something >Теперь я хотел бы знать, могу ли я также использовать класс в качестве селектора? Я пытался: $(document).hover(‘.liDoc’.

Вам нужно объединить селектор и псевдо-селектор. Вам также понадобится элемент стиля, чтобы содержать ваши стили. Большинство людей используют внешнюю таблицу стилей для получения множества преимуществ (кэширование для одного).

Просто примечание: класс наведения не является необходимым, если вы не определяете только определенные ссылки для такого поведения (что может иметь место)

href является обязательным атрибутом элемента anchor, поэтому без него вы не можете ожидать, что все браузеры будут обрабатывать его одинаково. Во всяком случае, я где-то читал в комментарии, что вы хотите, чтобы ссылка подчеркивалась только при наведении курсора, а не иначе. Для этого можно использовать следующее, и оно будет применяться только к ссылкам с классом наведения:

Вы должны были использовать:

hover — это псевдокласс в CSS. Нет необходимости назначать класс.

В прошлый раз я работал над хорошим дефектом и больше задавался вопросом о том, как правильно использовать свойство наведения для ссылки тега и для браузера IE. Странной вещью для меня было то, что IE не смог захватить элемент ссылки тега на основе простого селектора A. Итак, я узнал, как даже принудительно захватить элемент тега, и я заметил, что мы должны использовать более конкретный селектор CSS. Вот пример ниже — он отлично работает:

Похожие вопросы:

Есть ли способ создать класс, который удаляет hover css из элемента? Скажем, у меня есть два элемента: <div noHover>Whatever</div> <div >
Расширенные спрайты css не работают с: hover?

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

Если у меня есть CSS p:hover , как это . как сделать то же самое с jQuery? Нет, нет сложного набора вызовов функций и декодирования свойств, но как сказать jQuery к.

Что лучше для скорости сайта, CSS: hover или jQuery hover? Или это примерно одно и то же?

Следующий код не применяется к классам CSS с :hover , но применяется ко всему остальному. Во всяком случае , чтобы заставить его работать с классами CSS, которые имеют :hover , или с любыми.

Как использовать hover css с изображением круга ? Я хочу, чтобы при наведении курсора на изображение черного круга оно меняло изображение красного круга ? Но в моем коде при наведении курсора на div.

Поскольку у меня есть динамический добавленный контент, мне нужно использовать document в качестве селектора для моего события. $(document).hover(function() < //Do something >Теперь я хотел бы.

Мой css: .sec-hover :hover Мой div: <div С помощью этого кода весь div не парит в.

Я нашел этот шаблон на сайте codepen и просто хочу создать мега-меню, следуя этому шаблону . однако я не знаю, как использовать SCSS, есть ли способ создать mega-menu, используя вместо этого Css. я.

Поскольку :hover , конечно же, не поддерживается в сенсорных браузерах. Кроме того, некоторые события CSS :hover могут быть активированы через браузер только для сенсорного ввода, если вы держите.

Селекторы псевдоклассов и псевдоэлементов в CSS (hover, first-child, first-line и другие), отношения между тегами Html кода

Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Сегодня мы продолжим тему изучения таблицы каскадных стилей и наполнять новыми материалами справочник.

Селекторы в CSS

Тема селекторов в CSS, которая была начата в предыдущей статье, осталась еще не завершенной, ибо мы рассмотрели только пять из семи возможных типов (тега и класса (class), Id, универсальный и атрибутов) и на очереди остались селекторы псевдоклассов и псевдоэлементов.

Отношения между тегами Html кода — дерево документа

Давайте начнем с псевдоклассов. Тут, правда, сначала нужно будет сделать отступление. Любой браузер, получая документ с любым языком разметки, тут же начинает его разбирать. Модуль, отвечающий в браузере за это дело, обычно называют парсер — он разбирает код, исправляет ошибки и формирует так называемое дерево.

Результат работы парсера любого браузера можно увидеть с помощью некоторых плагинов или расширений для этих обозревателей. Например, все тот же незаменимый плагин для Firefox под названием Firebug показывает это самое дерево документа:

Как выглядит дерево Html документа

Узлы этого дерева помечены плюсиками, нажав на которые можно будет увидеть вложенные элементы языка разметки Html. Построение этого дерева и есть результат работы парсера браузера. Давайте теперь посмотрим на принципы отношения между собой отдельных узлов.

Таких взаимоотношений может быть всего три вида (очень похоже на построение генеалогического дерева — отношение между родственниками):

  1. Предки и потомки. Например, для тега, показанного на приведенном выше примере, все остальные элементы являются потомками. Для них же всех он является прародителем — предком. Т.е. все, что находится внутри — это потомки. А предками будут являться все элементы, внутри которых данный элемент лежит.
    Предки и потомки среди Html элементов
  2. Родитель и ребенок — в цепочке предки-потомки всегда есть два ближайших звена, которые будут отвечать понятиям родитель и ребенок. Т.е. у любого Html элемента есть один родитель (ближайший предок) и в то же время у него могут быть или не быть один или же несколько детей.
    Родитель и ребенок в CSS
  3. Сестринские (братские) отношения — к ним относятся элементы, у которых один общий родитель.

Само по себе название «псевдоклассы» обозначает то, что специально в коде ни у каких элементов (тегов) такие классы (значения для атрибута Class) никто не прописывал, но у этих самых элементов периодически могут возникать определенные динамические состояния, для которых и были придуманы селекторы псевдоклассов.

Селекторы псевдоклассов — hover, focus, first-child и другие

Например, селекторы Link и Visited во всех браузерах могут использоваться только для оформления гиперссылок:

Селекторы Link и Visited

Link подразумевает под собой не посещенную ссылку (по которой пользователь еще не переходил), а Visited — посещенную. Таким образом вы можете настроить, например, изменение цвета для уже посещенных пользователем ссылок, ну или еще что-то другое (задать визуальное состояние для всех посещенных гиперссылок). Естественно, что посещенные будут учитываться именно для данного конкретного браузера и до момента очистки его истории.

Синтаксис написания селекторов псевдоклассов заключается в проставлении двоеточия после названия Html элемента, для которого вы его используете (a:visited).

Следующие три селектора (active, hover и focus) могут использоваться для любых тегов:

Селекторы псевдоклассов active, hover и focus

Active соответствует клику левой кнопки мыши по тому элементу в Html коде, название которого вы прописали перед этим псевдоклассом в селекторе (в нашем примере это тег гиперссылки A). Как только левую клавишу пользователь отожмет — псевдокласс active исчезнет.

В этом случае, при наведении курсора мыши на любой абзац текста и щелчке по левой кнопке мыши, мы увидим, что цвет этого параграфа изменится на красный. После отжатия кнопки цвет абзаца опять вернется к принятому по умолчанию. Т.е. данный псевдокласс active динамичен и будет работать абсолютно для любых тэгов (например, для контейнеров Div и т.п.). При клике на этом элементе он может изменить свое визуальное оформление в соответствии с нашими пожеланиями.

Hover — позволяет изменять визуальное оформление любого элемента в Html коде при наведении на него курсора мыши. При отведении курсора визуальное оформление элемента вернется к используемому по умолчанию.

Псевдокласс focus — позволяет изменять визуальное оформление тегов находящимся сейчас в фокусе. Как известно, фокус на веб странице можно переносить с помощью нажатия на клавишу Tab на клавиатуре. Причем, фокус может передаваться только между следующими элементам: ссылки и элементы форм в Html.

Псевдоклассы active и hover в браузере IE 6 работают только для элементов гиперссылок, а focus не работает вообще ни в IE 6, ни в IE 7.

Последний псевдокласс называется first-child (первый ребенок, в переводе).

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

Как найти среди Html документов детей и родителей

First-child в IE 6 не работает, что печально.

Селекторы псевдоэлементов — first-line (letter), after и before

Во время разработки концепции CSS планировалось писать селекторы псевдоэлементов с двойным двоеточием, чтобы отличать их от псевдоклассов, но пока синтаксис таков, что все они записываются с одним двоеточием. Возможно, что в будущем будут вводить соответствующие изменения.

Селекторы псевдоэлементов — first-line (letter), after и before

По самому слову «псевдоэлементы» понятно, что таких тегов в Html коде нет. На данный момент псевдоэлементов всего четыре и они приведены на расположенном чуть выше рисунке. Наверное, понятно по самому названию, что first-line будет указывать на первую линию, а first-letter — на первую букву.

Причем, оба этих псевдоэлемента применяются только к блочным тегам (заголовки, параграфы, контейнеры и т.п.) и как это ни печально, но в браузере IE 6 они тоже не работают.

Что это даст? Во всех параграфах на веб странице первые строки текста окрасятся в красный цвет. Для простоты подключим CSS к языку Html с помощью тега style и пропишем соответствующее свойство с использованием псевдоэлемента first-line в селекторе параграфа:

Css свойство с использованием псевдоэлемента first-line в селекторе параграфа

Тогда, как мы и планировали, все первые строки в абзацах окрасятся в красный цвет:

Все первые строки в абзацах окрасились в красный цвет из-за first-line

Ну, а с помощью first-letter можно сделать, например, так называемую буквицу (когда первая буква в абзаце отличается большим размером и цветом). Для этого можно будет прописать следующие CSS плавила для данного селектора псевдоэлемента:

Про Em, Ex, пиксели и другие размерности в CSS мы с вами уже говорили. Исходный код с добавленными свойствами тогда будет выглядеть так:

Css свойство с использованием псевдоэлемента first-letter в селекторе параграфа

А сама вебстраница с буквицей, созданной с помощью селектора first-letter, будет выглядеть так:

Первые буквы абзацев стали больше и окрасились в красный цвет благодаря first-letter

Два оставшихся псевдоэлемента after и before нужны для формирования контента на лету. Давайте посмотрим на примере:

В результате, в конце каждого абзаца на вебстранице автоматически добавится тот фрагмент, который мы указали в CSS свойстве «content» (оно используется только для псевдоэлементов after и before) и этот фрагмент будет окрашен в красный цвет:

Добавился фрагмент, который указали в CSS свойстве «content» (для псевдоэлементов after или before)

Если бы мы вместо «after» использовали бы «before», то дополнительный контент был бы добавлен внутри каждого абзаца на странице, но уже перед его содержимым. Напрашивается вопрос — а для чего это можно использовать на практике?

Оказывается, с помощью этих псевдоэлементов можно, например, создать сложную нумерацию вида «5.2.13». Обычными средствами Html этого сделать нельзя, а с использованием before — можно.

Пример сложно нумерации с разделами и подразделами

Для того, чтобы получить такой сложно нумерованный список, используется довольно простой Html код:

Html код списка со сложной нумерацией

Но при этом имеет место быть сложный код CSS стилей с использованием, естественно, псевдоэлементов after и before:

Css код с псевдоэлементами after и before для создания сложной нумерации

Все очень здорово, но, к сожалению, after и before не поддерживаются в браузерах IE 6 и IE 7. Увы и ах. В следующей статье мы поговорим про комбинации CSS селекторов и их приоритетность.

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

Комментарии и отзывы (3)

Че то я запуталась, а first-child — можно использовать для таблиц — когда надо окрасить один столбец (или шрифт в стобце) в определенный цвет?

Да и вообще уже здорово позабыла css — пользуюсь готовыми шаблонами Joomla.А все из за таких сильных различий в восприятии браузерами css. Особенно IE6 — обидно,что люди им еще пользуются!(у меня на сайте как минимум 10% от всех пользователей)

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *