A hover: HTML и CSS с примерами кода

Содержание

: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.

ВозможностьChromeFirefox (Gecko)Internet ExplorerOperaSafari
для <a> элементов0.21.0 (1.7 или ранее)4.04.02.0.4 (419)
различные ошибки до этой версии
для всех элементов0.21.0 (1.7 или ранее)7.07.02.0.4 (419)
различные ошибки до этой версии
для псевдоэлементов?28 (28)???
ВозможностьAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari 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.

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

HTML и CSS с примерами кода

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

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

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

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

Замечания по использованию

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

Псевдоклассы

Синтаксис

/* Selects any <a> element when "hovered" */
a:hover {
  color: orange;
}

Спецификации

Описание и примеры

Пример 1. Выпадающее меню

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

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

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

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

Пример 3

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>hover</title>
    <style>
      a:link {
        color: #0000d0; /* Цвет ссылок */
        padding: 2px; /* Поля вокруг текста */
      }
      a:hover {
        background: #786b59; /* Цвет фона под ссылкой */
        color: #ffe; /* Цвет ссылки */
      }
    </style>
  </head>
  <body>
    <p><a href="1.html">Ссылка 1</a></p>
    <p><a href="2.html">Ссылка 2</a></p>
    <p><a href="3.html">Ссылка 3</a></p>
  </body>
</html>

В данном примере псевдокласс :hover применяется к ссылке (тегу <a>), при этом меняется цвет ссылки и фона под ней. Результат:

Пример 4

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>hover</title>
    <style>
      ul {
        width: 180px; /* Ширина меню */
        list-style: none; /* Для списка убираем маркеры */
        margin: 0; /* Нет отступов вокруг */
        padding: 0; /* Убираем поля вокруг текста */
        font-family: Arial, sans-serif; /* Рубленый шрифт для текста меню */
        font-size: 10pt; /* Размер названий в пункте меню */
      }
      li ul {
        position: absolute; /* Подменю позиционируются абсолютно */
        display: none; /* Скрываем подменю */
        margin-left: 165px; /* Сдвигаем подменю вправо */
        margin-top: -2em; /* Сдвигаем подменю вверх */
      }
      li a {
        display: block; /* Ссылка как блочный элемент */
        padding: 5px; /* Поля вокруг надписи */
        text-decoration: none; /* Подчеркивание у ссылок убираем */
        color: #666; /* Цвет текста */
        border: 1px solid #ccc; /* Рамка вокруг пунктов меню */
        background-color: #f0f0f0; /* Цвет фона */
        border-bottom: none; /* Границу снизу не проводим */
      }
      li a:hover {
        color: #ffe; /* Цвет текста активного пункта */
        background-color: #5488af; /* Цвет фона активного пункта */
      }
      li:hover ul {
        /* При выделении пункта курсором мыши отображается подменю */
        display: block;
      }
      . brd {
        border-bottom: 1px solid #ccc; /* Линия снизу */
      }
    </style>
  </head>
  <body>
    <ul>
      <li>
        <a href="russian.html">Русская кухня</a>
        <ul>
          <li><a href="linkr1.html">Бефстроганов</a></li>
          <li><a href="linkr2.html">Гусь с яблоками</a></li>
          <li>
            <a href="linkr3.html">Крупеник новгородский</a>
          </li>
          <li>
            <a href="linkr4.html"
              >Раки по-русски</a
            >
          </li>
        </ul>
      </li>
      <li>
        <a href="ukrainian.html">Украинская кухня</a>
        <ul>
          <li><a href="linku1.html">Вареники</a></li>
          <li>
            <a href="linku2.html">Жаркое по-харьковски</a>
          </li>
          <li>
            <a href="linku3. html">Капустняк черниговский</a>
          </li>
          <li>
            <a href="linku4.html"
              >Потапцы с помидорами</a
            >
          </li>
        </ul>
      </li>
      <li>
        <a href="caucasus.html">Кавказская кухня</a>
        <ul>
          <li><a href="linkc1.html">Суп-харчо</a></li>
          <li><a href="linkc2.html">Лилибдж</a></li>
          <li><a href="linkc3.html">Чихиртма</a></li>
          <li>
            <a href="linkc4.html">Шашлык</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="asia.html"
          >Кухня Средней Азии</a
        >
      </li>
    </ul>
  </body>
</html>

В данном примере псевдокласс :hover добавляется к элементу списка (тег <li>) для создания двухуровневого меню. Результат:

См. также

Ссылки

  • Псевдо-класс :hover MDN (рус.)

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

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

Пример

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

a:hover
{
   
background-color: yellow;
}

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

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

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

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

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

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

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

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

Селектор
: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 — a: hover или #menubar: hover не работает для заголовка

css — a: hover или #menubar: hover не работает для заголовка — qaru

Присоединяйтесь к Stack Overflow , чтобы учиться, делиться знаниями и строить свою карьеру.

Спросил

Просмотрено
567 раз

Мне не удается заставить работать элемент a: hover.Я любитель, поэтому будьте проще … Я тоже пробовал использовать #menubar: hover, но это тоже не работает.

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

  * {
маржа: 0;
отступ: 0;
семейство шрифтов: arial;
размер шрифта: 15 пикселей;
выравнивание текста: центр;
}

#строка меню,
#menubar ul {
стиль списка: нет;
}
#menubar> li {
плыть налево;
}
#menubar li a {
дисплей: таблица-ячейка;
высота: 40 пикселей;
ширина: 110 пикселей;
набивка: 20 шт. 
текстовое оформление: нет;
вертикальное выравнивание: по центру;
}
#menubar> li> a {
цвет фона: # 303432;
цвет: #fff;
}
#строка меню{
позиция: абсолютная;
верх: 100 пикселей;
слева: 400 пикселей;
}
a: hover {
цвет: желтый;
}  
  


 Строка меню

Помогите, пожалуйста!

задан 2 мая ’15 в 5:52

2

проверьте это

  #menubar li a: hover {
        цвет: желтый;
        }

полный код:

  * {
маржа: 0;
отступ: 0;
семейство шрифтов: arial;
размер шрифта: 15 пикселей;
выравнивание текста: центр;
}

#строка меню,
#menubar ul {
стиль списка: нет;
}
#menubar> li {
плыть налево;
}
#menubar li a {
дисплей: таблица-ячейка;
высота: 40 пикселей;
ширина: 110 пикселей;
набивка: 20 шт. 
текстовое оформление: нет;
вертикальное выравнивание: по центру;
}
#menubar> li> a {
цвет фона: # 303432;
цвет: #fff;
}
#строка меню{
позиция: абсолютная;
верх: 100 пикселей;
слева: 400 пикселей;
}
#menubar li a: hover {
цвет: желтый;
}  
  


 Строка меню

Создан 02 мая 2015, в 11: 382015-05-02 11:38

эхсанехсан

5144 бронзовых знака

  * {
маржа: 0;
отступ: 0;
семейство шрифтов: arial;
размер шрифта: 15 пикселей;
выравнивание текста: центр;
}

#строка меню,
#menubar ul {
стиль списка: нет;
}
#menubar> li {
плыть налево;
}
#menubar li a {
дисплей: таблица-ячейка;
высота: 40 пикселей;
ширина: 110 пикселей;
набивка: 20 шт. 
текстовое оформление: нет;
вертикальное выравнивание: по центру;
}
#menubar> li> a {
цвет фона: # 303432;
цвет: #fff;
}
#строка меню{
позиция: абсолютная;
верх: 100 пикселей;
слева: 400 пикселей;
}
a: hover {
цвет: желтый! важно;
}  
  


 Строка меню

Здесь стиль тега отменяет наведение.Поэтому, если вы поместите его как! Important, этому стилю будет отдан приоритет, чем другим стилям, и он будет иметь приоритет над всеми другими стилями. Просто поместите! Important на цвет: желтый, и он работает.

Создан 02 мая 2015, 06:02:42

Я хотел посмотреть, смогу ли я заставить это работать без! Важности.Проблема в том, что селектор CSS, который устанавливает текст в белый цвет, использует большую специфичность, чем стиль наведения. Лучший способ сделать это — установить более высокий уровень специфичности наведения, который позволит ему работать. Используйте это при наведении курсора.

  #menubar li a: hover {
        цвет: желтый;
}

Создан 02 мая 2015, 06:18:26

Э ЛАРОШЭ ЛАРОШ

1,94011 золотых знаков77 серебряных знаков88 бронзовых знаков

Это потому, что #menubar> li> {background-color: # 303432;} будет перекрывать ваш CSS. a: hover {color: yellow;} Итак, сделайте это важным при наведении, как в ответе.

  a: hover {color: yellow! Important;}

или

  #menubar> li> a: hover {color: yellow;}

Решит Ваш вопрос.

  * {
маржа: 0;
отступ: 0;
семейство шрифтов: arial;
размер шрифта: 15 пикселей;
выравнивание текста: центр;
}

#строка меню,
#menubar ul {
стиль списка: нет;
}
#menubar> li {
плыть налево;
}
#menubar li a {
дисплей: таблица-ячейка;
высота: 40 пикселей;
ширина: 110 пикселей;
набивка: 20 шт.
текстовое оформление: нет;
вертикальное выравнивание: по центру;
}
#menubar> li> a {
цвет фона: # 303432;
цвет: #fff;
}
#строка меню{
позиция: абсолютная;
верх: 100 пикселей;
слева: 400 пикселей;
}
a: hover {
цвет: желтый! важно;
}  
  


 Строка меню

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

Создан 02 мая 2015, в 07:25

кетанкетан

17.6k4040 золотых знаков4949 серебряных знаков8282 бронзовых знака

Не тот ответ, который вы ищете? Просмотрите другие вопросы с метками css или задайте свой вопрос.

по умолчанию

Stack Overflow лучше всего работает с включенным JavaScript

Ваша конфиденциальность

Нажимая «Принять все файлы cookie», вы соглашаетесь с тем, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в ​​отношении файлов cookie.

Принимать все файлы cookie

Настроить параметры

Используя только CSS, показывать div при наведении курсора на

Я хотел бы предложить это шаблонное решение общего назначения, которое расширяет правильное решение, предоставленное И Цзян.

Дополнительные преимущества включают:

  • поддержка наведения курсора на любой тип элемента или несколько элементов;
  • всплывающее окно может быть любым типом элемента или набором элементов, включая объекты;

    • Самодокументирующийся код

  • ;
  • гарантирует, что всплывающее окно появляется поверх других элементов;
  • — хорошая основа для подражания, если вы генерируете html-код из базы данных.

В html вы помещаете следующую структуру:

В css вы размещаете следующую структуру:

  div.information_popup_container {
позиция: абсолютная;
ширина: 0 пикселей;
высота: 0 пикселей;
/ * Информация о позиции * /
/ * Информация о внешнем виде * /
}
div. information_popup_container> div.information {
/ * Информация о позиции * /
/ * Информация о внешнем виде * /
}
div.information_popup_container> div.popup_information {
положение: фиксированное;
видимость: скрыта;
/ * Информация о позиции * /
/ * Информация о внешнем виде * /
}
div.information_popup_container> div.information: hover + div.popup_information {
видимость: видимая;
z-индекс: 200;
}

Следует отметить следующие моменты:

  1. Поскольку позиция div.popup установлена ​​на фиксированную (также будет работать с абсолютным значением), содержимое не находится внутри обычного потока документа, что позволяет атрибуту visible работать нормально.
  2. z-index настроен так, чтобы div.popup отображался над другими элементами страницы.
  3. Контейнер information_popup_container имеет малый размер, поэтому на него нельзя навести курсор мыши.
  4. Этот код поддерживает только наведение курсора на элемент div.information. Для поддержки наведения курсора на div. information и div.popup см. Раздел «Наведение над всплывающим окном» ниже.
  5. Он был протестирован и работает должным образом в Opera 12.16, Internet Explorer 10.0.9200, Firefox 18.0 и Google Chrome 28.0,15.

Наведите указатель мыши на всплывающее окно

В качестве дополнительной информации. Когда всплывающее окно содержит информацию, которую вы можете вырезать и вставить или содержит объект, с которым вы, возможно, захотите взаимодействовать, сначала замените:

  div.information_popup_container> div.information: hover + div.popup_information {
видимость: видимая;
z-индекс: 200;
}

с

  div.information_popup_container> div.information: hover + div.popup_information
, div.information_popup_container> div.popup_information: hover {
видимость: видимая;
z-индекс: 200;
}

Во-вторых, отрегулируйте положение div.popup так, чтобы оно перекрывалось с div.information. Достаточно нескольких пикселей, чтобы div. popup мог получить наведение при перемещении курсора с div.information.

Это не работает должным образом с Internet Explorer 10.0.9200 и работает должным образом с Opera 12.16, Firefox 18.0 и Google Chrome 28.0.15.

См. Скрипт http://jsfiddle.net/F68Le/ для полного примера со всплывающим многоуровневым меню.

Основы CSS: Использование: hover и: active псевдоклассов ← Alligator.io

CSS предлагает несколько псевдоклассов для стилизации элементов, которые могут помочь различать различные состояния элементов. Здесь мы сосредоточимся на: hover и: active, чтобы увидеть, как улучшить визуальную обратную связь для пользователей и убедиться, что ваш пользовательский интерфейс отлично выглядит на всех устройствах! 🔥

Что такое «Псевдокласс»?

Псевдокласс выбирает состояние селектора в CSS.

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

Наведение курсора на элемент, например кнопку, является одним из примеров изменения состояния элемента в CSS. Состояние «зависания» может быть оформлено иначе, чем состояние по умолчанию без зависания.

Аналогичным образом, щелчок по ссылке обновит состояние ссылки в CSS и сделает ее «активной».

Предоставление пользователям визуальной обратной связи

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

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

Использование псевдоклассов в CSS может помочь предоставить пользователям визуальную обратную связь, чтобы они понимали, как взаимодействовать с пользовательским интерфейсом.

Псевдокласс: hover

Псевдокласс : hover — один из наиболее распространенных в CSS. Давайте сначала рассмотрим несколько примеров того, как его использовать.

В качестве основы давайте сделаем все теги зеленым цветом.

Если мы хотим изменить цвет при наведении курсора, мы объявляем второй стиль, в котором мы снова выбираем теги , но затем добавляем псевдокласс : hover .

  а {
  цвет: зеленый;
}

a: hover {
  цвет: желтый;
}

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

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

, класса, идентификатора и их комбинации:

  p: hover {
  цвет фона: зеленый;
}

.gator: hover {
  font-weight: жирный;
}

#cayman: hover {
  размер шрифта: 2rem;
}

input.gator [type = "text"]: hover {
  граница: сплошной желтый 1px;
}

input.gator [type = "text"]: hover span {
  граница: сплошной черный цвет 2px;
}

Обратите внимание, что псевдокласс находится в конце селектора. Его следует добавить к элементу, на который наведен курсор, который может быть родительским для более конкретного селектора.

Преимущество использования псевдокласса: hover заключается в том, что CSS выполняет всю работу за нас. Извините, JavaScript, но нам здесь не нужны никакие операторы if или управление состоянием! 💪

Использование: hover с разными устройствами

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

Псевдокласс: active

Как и псевдокласс : hover , : active следует использовать вместе с вашими обычными селекторами CSS.

: активный можно использовать для выбора элемента в его «активированном» состоянии. Чаще всего он используется для ссылок и относится к моменту выбора (или нажатия) ссылки. Чтобы увидеть активный стиль, попробуйте щелкнуть ссылку ниже:

Я становлюсь фиолетовым при нажатии

Это достигается путем добавления псевдокласса : active к допустимому селектору CSS.

  а {
  цвет: зеленый;
}

a: hover {
  цвет: желтый;
}

a: active {
  цвет: фиолетовый;
}

Использование: active на разных устройствах

Поскольку : active относится к тому моменту, когда элемент находится в процессе выбора, он работает примерно одинаково на всех устройствах.

Имеет ли значение порядок псевдоклассов?

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

Правильный порядок 🚀

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

Однако, если мы поменяем местами объявления стилей : hover и : active , стиль : hover , к сожалению, переопределит стиль : active .

  а {
  цвет: зеленый;
}

a: active {
  цвет: фиолетовый;
}

a: hover {
  цвет: желтый;
}

Неверный порядок 🙈

Обратите внимание, что теперь, когда вы нажимаете на ссылку, она больше не становится фиолетовой, хотя мы объявили цвет активного состояния.

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

Краткое содержание

При стилизации состояний элементов с помощью : hover и : active , не забудьте:

A: hover and named якоря

A: зависающие и именованные якоря

Если вы наведете курсор мыши на заголовок «A: наведение и названные привязки» или рядом с ним в Mozilla, Netscape 6+ или Opera 7, вы заметите, что он подвержен тем же эффектам наведения, что и ссылка ниже.(Элемент A в этом примере сделан на уровне блоков, чтобы сделать эффект более очевидным в Netscape.)

Это ссылка на заголовок «A: наведение и названные якоря»

a {display: block}
a: ссылка, a: посетил {text-decoration: none; цвет: синий}
a: hover {украшение текста: подчеркивание; красный цвет; background: yellow}

A: наведение и названные привязки

Если вы используете «именованные привязки» и хотите предотвратить нежелательные эффекты в браузерах, поддерживающих псевдокласс : hover на объектах, отличных от ссылок, у вас есть несколько вариантов, но только одно истинное решение.

Этот тест проводился в операционной системе Windows с Mozilla 1, Netscape 6.2, Internet Explorer 5.5 и 6, Opera 5.12, 6.03, & 7.01 и Netscape Navigator 4.61 / 4.79; результаты не обязательно включают предыдущие версии браузера или другие операционные системы.

Возможное решение: объединить псевдоклассы

Создание комбинированного селектора псевдокласса для эффекта наведения решает проблему и работает в IE5 и 6, M1, N6 + и O7. Однако Opera 5 и 6 не поддерживают комбинирование псевдоклассов.Фактически, Opera 5 и 6 обрабатывают селекторы просто как « a: link, a: visit », что может создать дополнительные проблемы.

а: ссылка: навести, а: посетил: навести {текст-украшение: подчеркивание; красный цвет; фон: желтый}

Посмотрите это решение в действии ->

Возможное решение: ID целевого элемента

Вместо использования именованного якоря просто укажите целевой элемент. При использовании в строке вы можете обернуть SPAN вокруг цели и идентифицировать тег SPAN . Обратной стороной этой опции является то, что старые браузеры, такие как Netscape 4, не поддерживают атрибут id . Поэтому целевые ссылки не будут работать в старых версиях браузеров.

Это ссылка на заголовок выше «Возможное решение: ID целевого элемента»
Это ссылка на целевой встроенный элемент SPAN в предыдущем абзаце.

Возможное решение: ID целевого элемента

ID тега SPAN

Возможное решение: селектор атрибутов [href]

Вы можете создавать объявления при наведении курсора, используя селектор атрибутов a [href]: hover .Это работает в M, N6 + и O5 +, но IE5 и 6 не поддерживают селекторы атрибутов. Поэтому пользователи IE5 и 6 не увидят эффекта зависания.

a [href]: hover {украшение текста: подчеркивание; красный цвет; фон: желтый}

Посмотрите это решение в действии ->

Рекомендуемое решение: селектор атрибутов [имя]

Встречное объявление любых объявлений, сделанных для наведения с помощью селектора атрибутов a [имя]: hover . Это решение рекомендуется для совместимости со всеми браузерами.Эффект наведения отображается для ссылок во всех браузерах, поддерживающих псевдокласс : hover , но не отображается на именованных привязках в новых браузерах.

a: hover {украшение текста: подчеркивание; красный цвет; фон: желтый}
a [имя]: наведите указатель мыши {украшение текста: наследование; цвет: наследовать; фон: наследование}

Посмотрите это решение в действии ->

Ссылки по теме

«Заметки о предложении стилей ссылок»
http: //www.people.fas.harvard.edu/~dbaron/css/1999/09/links

«Обновленный метод определения псевдоклассов ссылок»
http://www.evolt.org/article/view/17/35541/index.html

Благодарности

Тим Ривера хотел бы поблагодарить следующих людей за их предложения: Кристоф Нейринк, Рийк ван Гейтенбек, Рик

Дата испытания: 20 июня 2002 г.
Изменено: 25 июня 2002 г.
Изменено: 3 марта 2003 г.

Простой способ создать анимацию наведения для кнопок с помощью CSS | автор: Erica N

Давайте начнем с создания разметки для двух кнопок.

Класс .container используется только для центрирования наши две кнопки для презентационных целей. Главное — это теги кнопок внутри контейнера div.

Каждая кнопка имеет два класса. Класс .btn обеспечит общий стиль для обеих кнопок, но классы .btn-1 и .btn-2 мы будем использовать для предоставления индивидуальных эффектов наведения.

Затем мы переходим к CSS, где мы можем стилизовать кнопки.

Затем мы создаем стиль для обеих кнопок.

 button.btn {
 фон: прозрачный; 
 цвет: белый; 
 граница: 2 пикселя сплошного белого цвета; 
 font-size: 20px; 
 межбуквенный интервал: 2 пикселя; 
 отступ: 25 пикселей 80 пикселей; 
 преобразование текста: прописные буквы; 
 курсор: указатель; 
 дисплей: встроенный блок; 
 margin: 15px 30px; / * анимация и время переходов * / -webkit-transition: all 0. 4s; 
 -moz-transition: все 0.4с; Переход 
: все 0,4 с; 
}

Теперь у нас есть обе кнопки, и мы можем сосредоточиться на анимации для каждой кнопки. Начнем с первой кнопки.

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

 button.btn-1: hover {
 background-color: white; 
 цвет: черный; 
 -webkit-transition: все 0,4 с; 
 -моз-переход: все 0,4 с; 
 переход: все 0.4с; 
}

Следующая кнопка, которую мы создадим, будет более сложной, но мы рассмотрим каждый блок кода CSS.

Если вы посмотрите на наш код выше, вторая кнопка имеет скользящий фон. Чтобы убедиться, что скользящая анимация остается в пределах кнопки, мы создаем следующий блок CSS для нашего класса .btn-2 :

 button.btn-2 {
 overflow: hidden; 
 позиция: относительная; 
}

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

 button. btn-2: hover {
 цвет: черный; 
}

Для создания белого анимационного фона мы используем псевдоэлемент : после вместе со свойством content , чтобы вставить рамку внутри кнопки.

Затем мы стилизуем прямоугольник и анимируем его. Первоначально его высота равна нулю, но при наведении курсора прямоугольник расширяется, заполняя его высоту.

 button.btn-2: после {
 content: ''; 
 позиция: абсолютная; 
 z-индекс: -1; 
 -webkit-transition: все 0.4с; 
 -моз-переход: все 0,4 с; Переход 
: все 0,4 с; 
 ширина: 100%; 
 высота: 0; 
 верх: 0; 
 осталось: 0; 
 фон: #fff; 
} button.btn-2: hover: after, 
 button.btn-2: active: after {
 height: 100%; 
}

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

Спасибо за чтение.

Изменение внешнего вида состояний компонентов при наведении

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

Для своего исследования я начал с набора пользовательского интерфейса, который некоторое время был в нашем портфолио, и это Tractiv от Коди Брауна. Этот комплект действительно представляет визуальные состояния объектов. Так, например, если я увеличу здесь масштаб и взгляну на эту глобальную кнопку с таблеткой.Обратите внимание на то, что слева я вижу активное состояние этой кнопки, справа я вижу неактивное состояние. Давайте продолжим и перейдем к некоторым компонентам, с которыми я экспериментировал с новой функцией состояния компонентов. Одно из самых простых применений состояний компонентов — это взять набор элементов, которые связаны друг с другом, и использовать состояния для их реорганизации. У меня есть набор из трех значков, и я бы хотел использовать состояния для этих значков.

Для этого я войду и выделю группу объектов.Обратите внимание, что у меня есть компонент внутри выбранной группы. Вы можете продолжать вкладывать компоненты друг в друга и применять состояния к каждому из этих компонентов, что может дать вам довольно сложный рабочий процесс. Я конвертирую это в компонент, я могу сделать это, используя, конечно, правое меню или команду клавиатуры. Я собираюсь использовать новую функцию с этой последней версией XD и перейти сюда, в инспекторе свойств, к компоненту. область, в которую я добавлю этот компонент. Обратите внимание, что это указывает на то, что это главный компонент, который теперь имеет состояние по умолчанию. Я хочу добавить второе состояние, и я сделаю это здесь, в правом углу, нажав знак +. И затем я выберу новое состояние, и я дам ему имя, которое мы назовем этим весом, и оттуда я собираюсь войти и убрать значок. Я также поменяю этикетку, и все готово.

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

Теперь, когда мы рассмотрели, как создавать состояния, давайте посмотрим, как вы можете определять взаимодействия между этими состояниями. Поскольку мы рассмотрели состояния, я собираюсь быстро пройти через эту часть процесса и больше сосредоточиться на взаимодействиях в следующем разделе. Здесь, на холсте дизайна, я работал над внешним видом тумблера. Итак, у меня есть состояние по умолчанию: состояние наведения, а затем активное состояние для этого переключателя. Давайте увеличим еще немного.Теперь я готов определить состояния и их взаимодействие. Я продолжу и начну с первых объектов здесь, с левой стороны, я собираюсь преобразовать их в компонент, а в области мастера компонентов здесь, в инспекторе свойств, я собираюсь добавить второе состояние. Обратите внимание, что в раскрывающемся списке я могу выбирать между новым состоянием и состоянием при наведении, когда я выбираю состояние при наведении, оно не только создает состояние, но и автоматически создает взаимодействие при наведении, так что это просто облегчает мне задачу. Я всегда могу сделать это вручную, но приятно, когда они работают вместе.Я собираюсь выбрать состояние при наведении курсора и назову его наведение. Затем я перейду в это состояние и немного изменим его дизайн. Когда все готово, давайте посмотрим, что мы уже сделали. Я хочу всегда помнить, что нужно вернуться к состоянию по умолчанию, а затем перейти в приложение предварительного просмотра рабочего стола. Теперь, когда я подхожу к объекту, обратите внимание на то, как я нахожусь над ним. Он изменяет состояние на состояние зависания, и когда я откатываюсь, он возвращает его в состояние по умолчанию.

Теперь, если я создаю прототип сенсорного устройства, например, у него нет состояний наведения, так что это будет работать для прототипов интерфейсов с мышью или трекпадом, которые я использую сейчас.Давайте закроем это и добавим третье состояние. Итак, с объектом, все еще выбранным в области компонентов инспектора свойств, я подойду и добавлю, что на этот раз я выберу новое состояние и просто назову его активным, а затем оформлю его. Когда все готово, давайте перейдем к прототипу и щелкнем по объекту. Вы заметите, что есть три моих состояния. Если я вернусь в состояние по умолчанию, потому что я установил состояние наведения как это следующее состояние, я вижу при взаимодействии, у меня есть взаимодействие при наведении, которое использует автоматическую анимацию для перехода в это состояние наведения.Я собираюсь изменить это на щелчок. Я бы предпочел переключаться между этими отдельными состояниями, и я оставлю продолжительность такой, какая она есть. Затем я собираюсь добавить второе взаимодействие для перехода из состояния по умолчанию в активное состояние. Итак, для этого я перейду к разделу взаимодействия, нажмите знак +, и на этот раз я хочу, чтобы это было взаимодействие касанием, которое использует автоматическую анимацию для перехода в это активное состояние.

Я снова хочу, чтобы он был привязан к состоянию на 0,3 секунды. Последнее, что я хочу сделать, это вернуть себя из активного состояния обратно в состояние по умолчанию. Для этого я нажимаю «Активный», перехожу в раздел взаимодействия и нажимаю знак «+». И, используя касание в качестве триггера, я собираюсь автоматически вернуться к состоянию по умолчанию. И мы оставим это кратковременным. Еще раз вернитесь к состоянию по умолчанию, и давайте посмотрим на это в приложении предварительного просмотра рабочего стола. Обратите внимание, что теперь, когда я переворачиваюсь, я получаю состояние зависания, и если я нажимаю, я получаю автоматический переход в активное состояние. Повторное нажатие возвращает меня к состоянию по умолчанию, теперь очевидно, что это то, с чем вы захотите поэкспериментировать, когда вы взаимодействуете с этой новой функцией.Но это очень весело и по-настоящему мощная возможность.

Я рекомендую вам попробовать.

Настройка взаимодействия при наведении курсора | Взаимодействия | Создание и просмотр содержимого | Документация

1. Обзор

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

Видео по теме: Взаимодействие

2.Создайте первую приборную панель

Создайте набор показателей и добавьте его на информационную панель, чтобы отобразить OrderQty по продукту .

Информационная панель 1 с гистограммой, показывающей количество заказов по продуктам

3. Создайте вторую панель мониторинга

Создайте еще один набор показателей и добавьте его на вторую панель мониторинга, чтобы отобразить OrderQty по дате . Эта панель управления будет отображаться при наведении курсора / всплывающем окне. Диаграмма на этой панели инструментов дополнительно фильтруется по продукту путем добавления соответствующей иерархии в Срезы .

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

Информационная панель 2 с линейной диаграммой, показывающей OrderQty по дате и отфильтрованной по продукту

Затем разверните окно Parameters , которое закреплено в нижней части экрана. Щелкните Добавить новый , чтобы добавить новый параметр представления, а затем подключите его к иерархии продуктов как для диаграммы, так и для метки данных.

Добавить параметр просмотра

4. Настройте взаимодействие при наведении указателя мыши

Снова отредактируйте первую сводную панель. Щелкните правой кнопкой мыши гистограмму и выберите в меню Настроить взаимодействие .

Щелкните правой кнопкой мыши и выберите «Настроить взаимодействие».

Щелкните Наведите указатель мыши на .

Нажмите, наведите указатель мыши на

В Настроить всплывающее диалоговое окно выберите Dashboard 2 как другое представление, которое будет отображаться при наведении курсора.

Выберите Dashboard 2 для отображения в другом виде

Прокрутите вниз и установите для ширины (всплывающего окна) значение 500 , а для высоты — 375 .

Установить ширину и высоту всплывающего окна

Примечание

Параметр «Использовать ускоренный рендеринг » значительно ускоряет отображение всплывающего окна, но может потребовать изменения связанных сценариев, если это применимо. Например, если эта опция включена, метод action.getPopupContext () необходимо заменить на action.getPopupCanvasAdapter () .

Щелкните Установите параметры .

В диалоговом окне Set up Parameter Mappings щелкните Add new mapping .

Добавить новое сопоставление

В списке Источник установите флажок Фильтр ProductID. В списке Target выберите viewParameter1. Это формирует сопоставление, так что, когда пользователь наводит курсор на точку данных (продукт) на панели мониторинга 1, соответствующее значение продукта будет передано параметру представления на панели мониторинга 2.Поскольку параметр представления подключен к иерархии срезов продукта, линейная диаграмма на Dashboard 2 будет соответствующим образом отфильтрована при отображении во всплывающем окне.

Выберите источник и цель для сопоставления

5. Протестируйте взаимодействие

Переключитесь в режим Просмотрите режим и наведите указатель мыши на точку данных (продукт «Велосипеды») на приборной панели 1. Вы должны увидеть информационную панель 2, отображаемую во всплывающем окне, которое показывает OrderQty по дате , отфильтрованное по рассматриваемому продукту.

Проверить наведение в режиме просмотра

6.Также

.

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

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