A hover: html — a:hover при наведении

Содержание

:hover - CSS | MDN

CSS псевдокласс :hover срабатывает, когда пользователь наводит на элемент мышью, но не обязательно активирует его. Этот стиль может переопределяться другими относящимися к ссылкам псевдоклассами, такими как :link, :visited и :active, появляющимися в соответствующем порядке. Чтобы стилизировать ссылки должным образом, вам нужно вставлять правило :hover до правил :link и :visited, но после :active, как определено в LVHA-порядке: :link:visited:hover:active.

Псевдокласс :hover может применяться к любому псевдоэлементу. Это экспериментальное API, которое не должно использоваться в рабочем коде.

Браузеры, такие как Firefox, Internet Explorer, Safari, Opera или Chrome, применяют соответствующий стиль, когда курсор (указатель мыши) наводится на элемент.

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

:link:hover { outline: dotted red; }

.foo:hover { background: gold; }

Выпадающее меню

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

div. menu-bar ul ul {
  display: none;
}

div.menu-bar li:hover > ul {
  display: block;
}

применим к HTML структуре типа следующей:

<div>
  <ul>
    <li>
      <a href="example.html">Меню</a>
      <ul>
        <li>
          <a href="example.html">Ссылка</a>
        </li>
        <li>
          <a href="example.html">Подменю</a>
          <ul>
            <li>
              <a href="example.html">Подменю</a>
              <ul>
                <li><a href="example.html">Ссылка</a></li>
                <li><a href="example.html">Ссылка</a></li>
                <li><a href="example.html">Ссылка</a></li>
                <li><a href="example.html">Ссылка</a></li>
              </ul>
            </li>
            <li><a href="example.html">Ссылка</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

Смотрите наш полный пример выпадающего меню, основанный на CSS.

Галерея полноразмерных изображений и превью

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

Замечания: Для аналогичного эффекта, но основанного на псевдоклассе:checked (применяется к скрытым радиокнопкам), смотрите это демо, взятое со страницы ru/CSS/:checked.
Возможность Chrome Firefox (Gecko) Internet Explorer Opera Safari
для <a> элементов 0.2 1.0 (1.7 или ранее) 4.0 4.0 2.0.4 (419)
различные ошибки до этой версии
для всех элементов 0. 2 1.0 (1.7 или ранее) 7.0 7.0 2.0.4 (419)
различные ошибки до этой версии
для псевдоэлементов ? 28 (28) ? ? ?
Возможность Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Базовая поддержка ?
?
? ? ?

В IE8-11, наведя курсор на элемент, прокручивая вверх/вниз, без перемещения курсора, элемент останется в состоянии :hover, пока курсор не передвинут. Смотрите IE баг 926665.

В IE9 (и возможно ранее), если у <table> (en-US) есть родитель с width, установленной не в auto и overflow-x (en-US): auto;, а у <table> (en-US) столько контента, что он переполняет родителя по горизонтали, а также есть :hover стили, установленные на элементы в таблице, то при наведении на указанные элементы будет увеличиваться высота <table> (en-US). Вот живой пример, которой иллюстрирует этот баг. Один из способов исправления, установление min-height: 0%; на родителя таблицы (должны быть указаны %, 0 и 0px не работают). Баг подняли в jQuery ticket #10854, но его закрыли, так как это не ошибка jQuery.

На Safari Mobile for iOS 7.1.2, нажатие на кликабельный элемент (en-US) вызывает переход элемента в состояние :hover,  и элемент остаётся в нём, пока другой элемент не войдёт в состояние 

:hover.

Смотрите также:

Ссылки в CSS (text-decoration, :hover, :active, :visited, :link)

По умолчанию практически во всех браузерах ссылки выглядят одинаково: они подчёркнуты чертой и имеют синий цвет. Все эти свойства можно переопределить через CSS. Для начала попробуем изменить положение черты, используя свойство text-decoration, которое может принимать значения "underline", "overline", "line-through", "none". Рассмотрим последовательно эффект от каждого.

Рассмотрим ссылку:

<a href="/">MouseDC.ru</a>
Так будет выглядеть обычная ссылка на сайте, на котором нет никаких CSS правил (дизайн ссылки задаётся полностью браузером):
MouseDC.ru
overline ставит линию над текстом
<a href="/">MouseDC.ru</a>
результат:
MouseDC.ru
line-through перечёркивает текст посередине
<a href="/">MouseDC.ru</a>
результат:
MouseDC.ru
underline подчёркивает текст снизу (это значение по умолчанию в браузерах)
<a href="/">MouseDC.ru</a>
результат:
MouseDC.ru
none убирает подчёркивание:
<a href="/">MouseDC.ru</a>
результат:
MouseDC.ru

Состояния ссылок

Браузеры умеют понимать состояние ссылок. Этих состояний может быть несколько. Их можно отследить и задать им CSS свойства. Для этого используются псевдоклассы: ":hover" - это псевдокласс, который указывает на состояние, при котором на ссылку навели курсор мыши. Пример использования в CSS коде:
a:hover{
   font-size: 30px;
   color: red;
}

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

":active" - указывает на то, что на элемент кликнули и зажали кнопку мыши, но ещё не отпустили.

":visited" - указывает на то, что пользователь уже переходил по этой ссылке.

":link" - псевдокласс по умолчанию. Указывает на ссылку, которую ещё не посетили.

К примеру, если вы уже переходили по ссылке на странице, то она изменяет свой цвет. Если поднести курсор мыши к ссылке, то она окрасится в другой цвет. Если кликнуть на ссылку и зажать кнопку мыши, то . Свойства таких ссылок можно задать через CSS. Попробуем это сделать, на примере использования псевдокласса ":visited".

a:visited {
   color: green;
}

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

Обновляется!!! Справочник JavaScript


Пример

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

a:hover {
    background-color: yellow;
}

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

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

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

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

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

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


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

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

Селектор
:hover 4.0 7.0 2.0 3.1 9.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 Псевдо классы


перевод на русский, синонимы, антонимы, произношение, примеры предложений, транскрипция, значение, словосочетания

Другие результаты
The long rooster tail of pale dust that had followed them from Needles began to settle; the hovercraft sank into its inflated apron bag as they came to a halt. Петушиный хвост бледной пыли, тянувшийся за ними от Нидлеса, начал оседать.
Sage hovered for a wing beat, then his entire body dipped as if he'd almost forgotten to fly for a second. Шалфей завис в воздухе, а потом нырнул вниз, словно на миг забыл махать крыльями.
The bird was at the window, hovering at the Venetian blinds in a way that made it look as if it was having a look outside. Птица была уже у окна, зависала у жалюзи с таким видом, будто выглядывает наружу.
But instead of lassoing the rock like a bull in a Rodeo, the tractor will hover in front of it, and use gravity as a tow line. Это не родео, где на быка набрасывают лассо, и не космический тягач его оттащит, а будет использована сила тяжести.
Desecrated as the body is, a vengeful ghost survives and hovers over it to scare. Долго потом в оскверненном трупе живет мстительный дух и витает над ним, наводя страх.
Yeah, it worked perfectly well as a van, it just didn't really work as a hovercraft. Да, он прекрасно работал как фургон, но не как судно на воздушной подушке.
For a while her hand hovered about its face, performing those needless maternal actions as though unawares. Какое-то время ее рука висела над его лицом, совершая, словно сама собой, беспомощные материнские движения.
A four-oared galley hovering about in so unusual a way as to attract this notice was an ugly circumstance that I could not get rid of. Эта зловещая четырехвесельная шлюпка, неизвестно зачем шныряющая так близко от нас, не шла у меня из ума.
Two make-up men and a hairdresser were hovering over her as she sat in front of the dressing table that was part of the set. Она сидела за туалетным столиком, составлявшим часть декорации, и два костюмера и гример колдовали над ней.
Like a bird of prey, it hovers over us... as if to threaten us. как огромные хищные птицы она летает над нами, замирает и угрожает нам.
As he fell, he thought for a moment he saw a pale ghost hovering over him, clutching a gun. Then everything went black. Падая, он успел заметить, что над ним навис какой-то бледный призрак и что в руке у этого призрака пистолет. В следующую секунду в глазах потемнело, и он потерял сознание.
Japp said bitterly: And that's publicity for you! as the doctor went out. Poirot was hovering over the desk. He picked up a small brown address book. Доктор вышел. Пуаро наклонился под стол и поднял с пола маленькую коричневую записную книжку.
They torture it and place its head on a sharpened stake as an offering to the beast that hovers God-like over the island. Они разделали её и насадили голову на кол, как идол, посвященный существу, повеливающему островом.
Additionally, Tropical Freeze adds Dixie Kong as a partner character, who has a mid-air hover ability that affects how players access platforms. Кроме того, Tropical Freeze добавляет Дикси Конга в качестве партнера, который имеет способность зависать в воздухе, что влияет на то, как игроки получают доступ к платформам.
Created for the Filmation cartoon, a set of three Hover Robots action figures were released in 2015 as part of the Masters of the Universe Classics toyline. Созданный для мультфильма Filmation, набор из трех фигурных персонажей Hover Robots был выпущен в 2015 году в рамках игры Masters of the Universe Classics toyline.
This usually confines the ability to smaller birds, but some larger birds, such as a kite or osprey can hover for a short period of time. Это обычно ограничивает способность мелких птиц, но некоторые крупные птицы, такие как воздушный змей или скопа, могут парить в течение короткого периода времени.
As they hovered above the target the first helicopter experienced a hazardous airflow condition known as a vortex ring state. Когда они зависли над целью, первый вертолет испытал опасное состояние воздушного потока, известное как состояние вихревого кольца.
Just saying ... it may make sense to do a split as the content is hovering at 135 kilobytes long. Просто говорю ... возможно, имеет смысл сделать разделение, поскольку содержимое колеблется на 135 килобайт в длину.
The house has been described as sublime, a temple hovering between heaven and earth, a poem, a work of art. Дом был описан как возвышенный, храм, парящий между небом и землей, поэма, произведение искусства.
When users hover over a notification, that target will underline in the flyout, as shown in the mockup. Когда пользователи наведут указатель мыши на уведомление, этот целевой объект будет подчеркнут во всплывающем окне, как показано в макете.

CSS: переключатель при наведении курсора


Пример

Выбор и стиль ссылки при наведении на нее курсора:

а: парение {
цвет фона: желтый;
}

Попробуй сам "

Дополнительные примеры "Попробуйте сами" ниже.


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

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

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

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

Примечание: : hover ДОЛЖЕН стоять после: link и: loaded (если они присутствуют) в определении CSS, чтобы быть эффективным!


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

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

Селектор
: парение 4,0 7,0 2,0 3,1 9,6

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


Синтаксис CSS

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

Другие примеры

Пример

Выбор и стиль элемента

,

и

при наведении на него курсора:

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

Попробуй сам "

Пример

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

/ * непосещенная ссылка * /
a: ссылка {
цвет: зеленый;
}

/ * посещенная ссылка * /
a: посетил {
цвет: зеленый;
}

/ * наведение курсора мыши на ссылку * /
a: наведение {
цвет: красный;
}

/ * выбранная ссылка * /
а: активный {
цвет: желтый;
}

Попробуй сам "

Пример

Стили ссылок с разными стилями:

а. ex1: hover, a.ex1: active {
цвет: красный;
}

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

Попробуй сам "

Пример

Наведите указатель мыши на элемент , чтобы отобразить элемент

(например, всплывающую подсказку):

div {
дисплей: нет;
}

span: hover + div {
display: block;
}

Попробуй сам "

Пример

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

ul {
дисплей: встроенный;
маржа: 0;
отступ: 0;
}
ul li {display: inline-block;}
ul li: hover {background: # 555;}
ul li: hover ul {display: block;}
ul li ul {
позиция: абсолютная;
ширина: 200 пикселей;
дисплей: нет;
}
ul li ul li {
справочная информация: # 555;
дисплей: блок;
}
ul li ul li a {display: block! Important;}
ul li ul li: hover {background: # 666;}

Попробуй сам "

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

Учебник

CSS: ссылки CSS

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



Списки стилей CSS


заказанные списки:

  1. Кофе
  2. Чай
  3. Кока-Кола
  1. Кофе
  2. Чай
  3. Кока-Кола

Списки HTML и свойства списков CSS

В HTML есть два основных типа списков:

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

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