Штирлиц — Сеть печатных салонов в Перми

Весь комплекс печатных услуг в Перми. Общирная сеть печатных салонов в Перми. Цифровая печать, цветное и черно-белое копирование документов, сканирование документов, ризография в Перми

Hover в css: CSS: Hover — эффекты при наведении

СSS Селектор :hover

schoolsw3.com

САМОСТОЯТЕЛЬНОЕ ОБУЧЕНИЕ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ

❮ Назад CSS Селекторы Справочник Вперед ❯


Пример

Установить селектор и стиль ссылки при наведении на нее курсора мыши:

a:hover {
    background-color: yellow;
}

Редактор кода »

Определение и использование

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

Совет: Селектор :hover может использоваться на всех элементах, а не только на ссылках.

Совет: Используйте селектор :link для стиля ссылок на непросмотренные страницы, селектор :visited для стиля ссылок на посещенные страницы, и селектор :active для стиля активной ссылки.

Примечание: :hover Должен сработать после :link и :visited (если они присутствуют) в определении CSS, чтобы быть эффективным!

Версия:CSS1

Поддержка браузеров

Числа в таблице указывают первую версию браузера, которая полностью поддерживает селектор.

Селектор
:hover4.07.02.03.19.6

Примечание: В IE должна быть объявлена декларация <!DOCTYPE> чтобы селектор :hover работал с другими элементами, кроме элемента <a>.

CSS Синтаксис

:hover {
    css декларации;
} Демо

Примеры

Пример

Установить селектор и стиль элемента <p>, <h2> и <a> при наведении на него мыши:

p:hover, h2:hover, a:hover {
    background-color: yellow;
}

Редактор кода »

Пример

Установить селектор и стиль непросмотренных, посещенных, наведенных и активных ссылок:

/* непросмотренная ссылка */
a:link {
    color: green;
}

/* посещенная ссылка */
a:visited {
    color: green;
}

/* наведите указатель мыши на ссылку */
a:hover {
    color: red;
}

/* выбранная ссылка */
a:active {
    color: yellow;
}

Редактор кода »

Пример

Установить стиль ссылки с различными стилями:

a. ex1:hover, a.ex1:active {
    color: red;
}

a.ex2:hover, a.ex2:active {
    font-size: 150%;
}

Редактор кода »

Пример

Наведите курсор на элемент <span>, чтобы показать элемент <div> (как подсказка):

div {
    display: none;
}

span:hover + div {
    display: block;

}

Редактор кода »

Пример

Установить показ и скрытие выпадающее меню при наведении мыши:

ul {
    display: inline;
    margin: 0;
    padding: 0;
}
ul li {display: inline-block;}
ul li:hover {background: #555;}
ul li:hover ul {display: block;}
ul li ul {
    position: absolute;
    width: 200px;
    display: none;
}
ul li ul li {
    background: #555;
    display: block;
}
ul li ul li a {display:block !important;}
ul li ul li:hover {background: #666;}

Редактор кода »

Связанные страницы

CSS Учебник: CSS Ссылки

CSS Учебник: CSS Псевдо классы

❮ Назад CSS Селекторы Справочник Вперед ❯

ВЫБОР ЦВЕТА
ТОП Учебники
HTML Учебник
CSS Учебник
JavaScript Учебник
КАК Учебник
SQL Учебник
Python Учебник
W3.
CSS Учебник
Bootstrap Учебник
PHP Учебник
Java Учебник
C++ Учебник
jQuery Учебник
ТОП Справочники
HTML Справочник
CSS Справочник
JavaScript Справочник
SQL Справочник
Python Справочник
W3.CSS Справочник
Bootstrap Справочник
PHP Справочник
HTML Цвета
Java Справочник
Angular Справочник
jQuery Справочник
ТОП Примеры
HTML Примеры
CSS Примеры
JavaScript Примеры
КАК Примеры
SQL Примеры
Python Примеры
W3.CSS Примеры
Bootstrap Примеры
PHP Примеры
Java Примеры
XML Примеры
jQuery Примеры

Форум | О SchoolsW3

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

Некоторые страницы сайта могут быть не переведены на РУССКИЙ язык, можно отправить страницу как ошибку, так же можете самостоятельно заняться переводом. Используя данный сайт, вы соглашаетесь прочитать и принять Условия к использованию, Cookies и политика конфиденциальности.

Авторское право 1999- Все права защищены.
SchoolsW3 работает на площадке от SW3.CSS.

Обнаружение сенсорного ввода для touchscreen или hover для мыши

Ещё совсем недавно информации о размерах экрана было достаточно для предположения, например, что мобильные устройства будут использовать сенсорный ввод для touchscreen, а пользователи устройств с экраном большего размера, вероятнее всего, используют для управления курсором мышь. Разнообразие устройств с помощью которых можно просматривать веб-сайт не позволяет полагаться только на размеры области просмотра (viewport), как на фактор, определяющий выбор CSS и отдельное поведение страницы для touch-устройств.

Когда-то можно было спокойно обходиться только получением размеров экрана:

. some-component {
  /* Устройства с сенсорным вводом */
}
@media screen and (min-width: 1024px) {
  .some-component {
    /* Вероятно тут будет работать hover */
    /* Наверное, это устройство с мышью */
  }
}

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

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

Level 5 Media Queries

Спецификация CSS Level 5 Media Queries, помимо уже знакомых для определения размеров области просмотра, предоставляет набор новых медиа-запросов.

Один из них – hover feature поможет определить, есть ли у пользователя возможности наведения основного указателя на элементы страницы с помощью мыши.

Возможные для применения этого медиа-запроса значения: hover (для устройства с мышью) или none (например, для планшета или смартфона с сенсорным вводом).

Медиа-запрос hover можно использовать следующим образом:

.some-component {
  /* Устройства с сенсорным вводом */
}
@media (hover: hover) {
  .some-component {
    /* Тут будет работать hover */
    /* Это устройство с мышью */
  }
}

Функции hover и pointer на самом деле являются частью спецификации Level 4 Media Queries, но лишь недавно стали поддерживаться большинством браузеров.

See this code hover media query on x.xhtml.ru.

Это всё хорошо работает в большинстве браузеров, но в некоторых версиях Android есть функция, при которой долгое нажатие имитирует наведение (hover) и тогда этот медиа-запрос вернёт true. Чтобы предоставить этим пользователям те же стили, что и для других сенсорных устройств с touchscreen, следует обратиться к другой медиа-функции.

Pointer

Функция pointer проверяет, есть ли на устройстве указатель и точность указательного устройства. Возможные значения:

coarse (грубое для, например, пальца на сенсорном экране), fine (точное, например, мышь) или none (отсутствие, устройство без указателя).

Добавление проверки pointer в медиа-запрос успешно обнаруживает сенсорный ввод и на Android-устройствах:

.some-component {
  /* Устройства с сенсорным вводом, в т.ч. Android */
}
@media (hover: hover) and (pointer: fine) {
  .some-component {
    /* Тут будет работать hover и pointer===fine */
    /* Это устройство с мышью */
  }
}

See this code Hover and pointer media query on x.xhtml.ru.

any-hover и any-pointer

Предыдущие методы использовали для определения основные устройства ввода. Когда недостаточно определять сенсорный ввод только по основному устройству ввода, можно использовать в медиа-запросах функции any-hover и any-pointer, которые проверяют любой тип ввода.

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

Пример для javascript

Рассмотрим пример, когда при наведении на одинаковые картинки-ссылки нужно показывать всплывающие подсказки к ним. В обычных условиях у пользователей сенсорных устройств не будет шансов увидеть эту подсказку. Кликнув по изображению, пользователь сразу перейдет по URL-адресу ссылки и это может вызвать неприятные ощущения, поскольку ему заранее неизвестно, на какую страницу ведёт ссылка. В таком случае для устройств с touchscreen можно прервать щелчок и показать кнопку, которую пользователь сможет нажать, чтобы перейти к соответствующему URL-адресу.

Этот же медиа-запрос для обнаружения сенсорного ввода можно использовать и в JS с помощью matchMedia:

const list = document.querySelector('[data-list]')
const isHoverableDevice = window.matchMedia(
  '(hover: hover) and (pointer: fine)'
)
const blockLink = document.querySelector('[data-button-link]')
/* сперва скроем blockLink */
blockLink.hidden = true
list.addEventListener('click', (e) => {
  /* ничего не делаем, если target не ссылка, устройство не умеет hover */
  if (!e.target.dataset.link || isHoverableDevice.matches) return
  /* Если это сенсорный экран, перехватываем клик
  показываем ссылку
  */
  e.preventDefault()
  blockLink.hidden = false
  blockLink.innerText = `Visit ${e.target.dataset.link}’s page`
  blockLink.setAttribute('href', e.target.href)
})

Вот пример:

See this code Touch/hover tooltip on x.xhtml.ru.

Доступность

В зависимости от пользовательского интерфейса, возможно, понадобится задействовать вспомогательные технологии, используя ARIA-атрибуты для объявления кнопки, когда происходит изменение или перемещение фокуса на кнопку. Этот пример из MDN демонстрирует, как использовать живые ARIA-регионы для объявления динамических изменений элемента.

Поддержка в браузерах

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

Detecting Hover-Capable Devices.

: наведите | CSS-трюки — CSS-трюки

DigitalOcean предоставляет облачные продукты для каждого этапа вашего путешествия. Начните с бесплатного кредита в размере 200 долларов США!

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

 а: наведите {
  цвет: зеленый;
  оформление текста: подчеркивание над чертой;
}

Таким образом, когда такая ссылка «зависает» (например, при наведении курсора мыши на устройство):

 Перейти в Google

Он станет зеленым, а под ним и над ним появится линия.

В IE 6 и более ранних версиях :hover  раньше работало только со ссылками, но в новых браузерах работает с любым элементом. Это может быть особенно полезно для таких вещей, как раскрывающиеся меню, в которых вы можете дождаться :hover элемента родительского списка, а затем открыть следующий уровень вложенного меню. Однако будьте осторожны, эффекты наведения должны сочетаться с каким-либо действием, так как это давно устоявшийся веб-шаблон.

Поддержка браузера

900 43
IE Edge Firefox Chrome Safari Opera
Все Все Все Все Все Все
9000045
Android Chrome Android Firefox Browser Android IOS Safari Opera Mobile
Все Все Все Все Все
Источник: caniuse

:связь

а:ссылка {цвет: #f8a100; }

наведение

: активный

a:активный {цвет: #f8a100; }

наведение

:любая ссылка

.element:любая-ссылка { цвет: красный; }

наведение

:фокус

textarea: focus { фон: розовый; }

наведение

: посетил

a:посещено {цвет: #777; }

наведение

Как сделать так, чтобы наведение вызывало другое наведение в CSS? — HTML и CSS — Форумы SitePoint

andrewecookcook 1

Как сделать так, чтобы наведение вызывало другое наведение в CSS? какой пример?

ПолОБ 2

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

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

зухайбтаха210 3

В CSS вы можете сделать так, чтобы одно наведение вызывало другое наведение, используя псевдокласс «:hover» и псевдокласс «:active». Вот пример того, как это можно сделать:

HTML:

 

  
Наведите курсор 1

  
Наведите курсор 2

CSS:

.контейнер {
  дисплей: гибкий;
  выравнивание элементов: по центру;
  выравнивание содержимого: по центру;
  высота: 100вх;
}
. hover-1: зависание + .hover-2 {
  цвет фона: желтый;
}
.hover-2: активный {
  цвет фона: красный;
}

В этом примере при наведении курсора на элемент «Наведение 1» фон элемента «Наведение 2» будет желтым. Когда вы нажмете «Hover 2», его цвет фона изменится на красный.

Обратите внимание, что этот метод работает только в том случае, если второй элемент наведения является родственным по отношению к первому элементу наведения и расположен сразу после первого элемента. Селектор «+» используется для выбора второго элемента сразу после первого элемента.

ПолОБ 4

Нет, вы не можете вызвать состояние наведения на что-то еще, как я уже объяснял выше.

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

Оставить комментарий

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

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