Div hover: hover — Изменение стиля одного div-блока при наведении мыши на другой div-блок

Содержание

Псевдокласс :hover | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
6.0+8.0+1.0+4.0+1.0+1.0+

Краткая информация

Версии CSS

Описание

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

Синтаксис

элемент:hover { … }

Значения

Нет.

Пример 1

HTML5CSS2.1IECrOpSaFx

<!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>), при этом меняется цвет ссылки и фона под ней. Результат примера показан на рис. 1.

Рис. 1. Результат использования псевдокласса :hover для ссылок

Пример 2

HTML5CSS2.1IECrOpSaFx

<!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>) для создания двухуровневого меню. Результат примера показан на рис. 2.

Рис. 2. Использование :hover для создания меню

Браузеры

В браузере Internet Explorer до версии 6.0 включительно псевдокласс :hover работает только для ссылок.

:hover — CSS | MDN

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

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

Браузеры, такие как 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.

BCD tables only load in the browser

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

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

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

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

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

<div>
<div>
<!-- The thing or things you want to hover over go here such as images, tables, 
     paragraphs, objects other divisions etc. --> 
</div>
<div>
<!-- The thing or things you want to popup go here such as images, tables, 
     paragraphs, objects other divisions etc. --> 
</div>
</div>

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

div.information_popup_container {
position: absolute;
width:0px;
height:0px;
/* Position Information */
/* Appearance Information */
}
div.information_popup_container > div.information {
/* Position Information */
/* Appearance Information */
}
div.information_popup_container > div.popup_information {
position: fixed;
visibility: hidden;
/* Position Information */
/* Appearance Information */
}
div.information_popup_container > div.information:hover + div.popup_information {
visibility: visible;
z-index: 200;
}

Несколько моментов, на которые следует обратить внимание:

  1. Поскольку положение div.popup установлено на фиксированное (также будет работать с абсолютным), содержимое не находится внутри нормального потока документа, что позволяет хорошо работать видимому атрибуту.
  2. z-index установлен так, чтобы div.popup отображался над остальными элементами страницы.
  3. Параметр information_popup_container имеет небольшой размер и поэтому не может быть наведен.
  4. Этот код поддерживает только наведение на элемент div.information. Чтобы поддержать зависание над div.information и div.popup, см. Hover Over the 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 {
visibility: visible;
z-index: 200;
}

с участием

div.information_popup_container > div.information:hover + div.popup_information 
,div.information_popup_container > div.popup_information:hover {
visibility: visible;
z-index: 200;
}

И, во-вторых, отрегулируйте положение div.popup таким образом, чтобы оно совпадало с информацией div.in. Несколько пикселей достаточно для того, чтобы div.popup мог получать указатель при перемещении курсора от div.information.

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

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

CSS3-переходы (свойство transition)

CSS3-переходы позволяют анимировать исходное значение CSS-свойства на новое значение с течением времени, управляя скоростью смены значений свойств. Большинство свойств меняют свои значения за 16 миллисекунд, поэтому рекомендуемое время стандартного перехода — 200ms.

Смена свойств происходит при наступлении определенного события, которое описывается соответствующим псевдоклассом. Чаще всего используется псевдокласс :hover. Данный псевдокласс не работает на мобильных устройствах, таких как iPhone или Android. Универсальным решением, работающим в настольных и мобильных браузерах, будет обработка событий с помощью JavaScript (например, переключение классов при клике).

Переходы применяются ко всем элементам, а также к псевдоэлементам :before и :after. Для задания всех свойств перехода обычно используют краткую запись свойства transition.

CSS3-переходы могут применяться не ко всем свойствам и их значениям. Подробный перечень вы найдёте на этой странице.

Создание плавных изменений свойств элементов

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

IE: 10.0
Firefox: 16.0, 4.0 -moz-
Chrome: 26.0, 4.0 -webkit-
Safari: 6.1, 3.1 -webkit-
Opera: 12.1, 11.6 -o-
iOS Safari: 7.1
Opera Mini:
Android Browser: 4.4, 4.1 -webkit-
Chrome for Android: 44

1. Название свойства transition-property

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

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

transition-property
Значения:
none Отсутствие свойства для перехода.
all Значение по умолчанию. Применяет эффект перехода ко всем свойствам элемента.
свойство Определяет список CSS-свойств, перечисленных через запятую, участвующих в переходе.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

div {
width: 100px;
transition-property: width;
}
div:hover {
width: 300px;
}

2. Продолжительность перехода transition-duration

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

transition-duration
Значения:
время Время перехода указывается в секундах или миллисекундах, например, 2s или 5ms.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

div {
transition-duration: .2s;
}

See the Pen LRpLbk by Elena (@html5book) on CodePen.

3. Функция перехода transition-timing-function

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

transition-timing-function
Значения:
ease Функция по умолчанию, переход начинается медленно, разгоняется быстро и замедляется в конце. Соответствует cubic-bezier(0.25,0.1,0.25,1).
linear Переход происходит равномерно на протяжении всего времени, без колебаний в скорости. Соответствует cubic-bezier(0,0,1,1).
ease-in Переход начинается медленно, а затем плавно ускоряется в конце. Соответствует cubic-bezier(0.42,0,1,1).
ease-out Переход начинается быстро и плавно замедляется в конце. Соответствует cubic-bezier(0,0,0.58,1).
ease-in-out Переход медленно начинается и медленно заканчивается. Соответствует cubic-bezier(0.42,0,0.58,1).
cubic-bezier(x1, y1, x2, y2) Позволяет вручную установить значения от 0 до 1 для кривой ускорения. На этом сайте вы сможете построить любую траекторию перехода.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

div {
transition-timing-function: linear;
}

See the Pen CSS Timing Function by Elena Nazarova (@nazarelen) on CodePen.

Для создания более реалистичных анимаций используйте функцию cubic Bézier:

Рис. 1. Пользовательские функции cubic Bézier с сайта easings.net
Пользовательское название Значение функции
easeInSine cubic-bezier(0.47, 0, 0.745, 0.715)
easeOutSine cubic-bezier(0.39, 0.575, 0.565, 1)
easeInOutSine cubic-bezier(0.445, 0.05, 0.55, 0.95)
easeInQuad cubic-bezier(0.55, 0.085, 0.68, 0.53)
easeOutQuad cubic-bezier(0.25, 0.46, 0.45, 0.94)
easeInOutQuad cubic-bezier(0.455, 0.03, 0.515, 0.955)
easeInCubic cubic-bezier(0.55, 0.055, 0.675, 0.19)
easeOutCubic cubic-bezier(0.215, 0.61, 0.355, 1)
easeInOutCubic cubic-bezier(0.645, 0.045, 0.355, 1)
easeInQuart cubic-bezier(0.895, 0.03, 0.685, 0.22)
easeOutQuart cubic-bezier(0.165, 0.84, 0.44, 1)
easeInOutQuart cubic-bezier(0.77, 0, 0.175, 1)
easeInQuint cubic-bezier(0.755, 0.05, 0.855, 0.06)
easeOutQuint cubic-bezier(0.23, 1, 0.32, 1)
easeInOutQuint cubic-bezier(0.86, 0, 0.07, 1)
easeInExpo cubic-bezier(0.95, 0.05, 0.795, 0.035)
easeOutExpo cubic-bezier(0.19, 1, 0.22, 1)
easeInOutExpo cubic-bezier(1, 0, 0, 1)
easeInCirc cubic-bezier(0.6, 0.04, 0.98, 0.335)
easeOutCirc cubic-bezier(0.075, 0.82, 0.165, 1)
easeInOutCirc cubic-bezier(0.785, 0.135, 0.15, 0.86)
easeInBack cubic-bezier(0.6, -0.28, 0.735, 0.045)
easeOutBack cubic-bezier(0.175, 0.885, 0.32, 1.275)
easeInOutBack cubic-bezier(0.68, -0.55, 0.265, 1.55)

4. Задержка перехода transition-delay

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

transition-delay
Значения:
время Время задержки перехода указывается в секундах или миллисекундах.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

div {
transition-delay: .5s;
}

See the Pen wzKZoj by Elena (@html5book) on CodePen.

5. Краткая запись перехода

Все свойства, отвечающие за изменение внешнего вида элемента, можно объединить в одно свойство transition
transition: transition-property transition-duration transition-timing-function transition-delay;

Если воспользоваться значениями по умолчанию, то запись

div {transition: 1s;}

будет эквивалентна

div {transition: all 1s ease 0s;}

6. Плавный переход нескольких свойств

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

div {transition: background 0.3s ease, color 0.2s linear;}

или

div {
transition-property: height, width, background-color;
transition-duration: 3s;
transition-timing-function: ease-in, ease, linear;
}

7. Примеры переходов для различных свойств

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

See the Pen gbLXYK by HeleN (@nazarelen) on CodePen.

Отображение элемента div при наведении курсора на тег с помощью CSS

Мы можем применить CSS к отображаемому элементу div при наведении курсора на тег, используя соседний родственный селектор . Селектор «Соседний родственный» используется для выбора соседнего элемента или элемента, следующего за указанным тегом селектора.
Этот комбинатор выбирает только один тег, который находится рядом с указанным тегом.

Чтобы отобразить элемент div с помощью CSS при наведении на тег:

  • Сначала установите невидимый элемент div i.е дисплей: нет ;.
  • Во-вторых, используя соседний родственный селектор и наведите указатель мыши на тег, чтобы отобразить элемент div.

Пример: В этом примере показано, как отображать элемент div при наведении на тег.

9297

< html >

< головка >

< стиль >

9002

9002

цвет: зеленый;

}

дел {

дисплей: нет;

}

a: hover + div {

дисплей: блок;

цвет: зеленый;

размер шрифта: 25 пикселей;

}

стиль >

головка >

< корпус стиль = "текст: выравнивание: по центру;" >

< h2 > GeeksforGeeks h2 >

< b >

Наведение под элемент, чтобы увидеть

элемент < div >.

b >

< br >

< br >

< a > GeeksforGeeks a >

< div >

Портал компьютерных наук для компьютерных фанатов.

div >

корпус >

html >

9297 Вывод:
Перед наведением курсора на тег:

После наведения курсора на тег:

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


Как игнорировать события Hover / Mouseover для определенного элемента в CSS с помощью свойства pointer-events - Techstacker

Узнайте, как удалить / игнорировать событие mouseover / hover (: hover ) для определенных элементов HTML с помощью указателя -события собственности.

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

Содержание и структура карты пользовательского интерфейса

Каждый предмет карты галереи состоит из следующих элементов:

  • Фото сотрудника - черно-белое
  • Имя сотрудника - белый
  • Роль сотрудника - белый
  • Наложение тонкого темного фона

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

Пример карты пользовательского интерфейса

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

Имя сотрудника

Роль сотрудника

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

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

Вот HTML-код:

  
Имя сотрудника
Роль сотрудника

И CSS:

  .card {
  максимальная ширина: 350 пикселей;
  положение: относительное;
}

.card-overlay {
  background-image: linear-gradient (180deg, прозрачный, rgba (0, 0, 0, 0.5));
  высота: 100%;
  ширина: 100%;
  позиция: абсолютная;
  верх: 0;
  слева: 0;
  переход: цвет фона 0,6 с;
}

.card-overlay: hover {
  цвет фона: rgba (255, 204, 7, 0,5);
}

.card-image {
  максимальная ширина: 100%;
  дисплей: блок;
}

.card-info {
  позиция: абсолютная;
  внизу: 2 бэр;
  слева: 2 бэр;
}

.card-name,
.card-role {
  цвет белый;
  размер шрифта: 1,5 бэр;
  высота строки: 1,25;
  набивка: 0,25 бэр;
}

.card-name {
  font-weight: жирный;
}  

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

Из-за порядка наложения HTML.Порядок наложения обычно контролируется свойством CSS z-index . Однако существует порядок размещения по умолчанию , который возникает, если вы не обращаетесь к нему напрямую с помощью CSS.

z-index - это свойство CSS порядка стека . Элемент с наивысшим значением (числом) z-index помещается перед другими элементами - при условии, что их значение позиции совпадает. Значение по умолчанию z-index для всех элементов на веб-странице - auto , что совпадает с нулем 0 .

Итак, поскольку у нас есть два элемента, которые позиционируются как абсолютные, и оба имеют по умолчанию z-index из auto (0), какой из них находится перед другим в порядке наложения (один должен выиграть)?

Побеждает тот, который идет последним в вашем HTML.

В этом случае контейнер

, содержащий текстовые элементы имени и роли, идет после элемента наложения карты :

  
Имя сотрудника
Роль сотрудника

В примере карты пользовательского интерфейса, как только вы наводите указатель мыши на текстовые элементы, вы больше не наводите курсор на элемент наложения, а на элемент , который не имеет : hover (псевдокласс) прикреплен. Только .card имеет это (см. Код CSS).

Что ты умеешь?

Если физически переместить элемент

вниз на ниже ,
Имя сотрудника
Роль сотрудника

Затем порядок наложения поменяется местами, и происходит следующее:

Имя сотрудника

Роль сотрудника

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

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

Мы решили одну проблему при создании другой.

Давайте , а не , воспользуемся этим подходом и переместим элемент

обратно в исходное положение.

Что, если вместо этого мы дадим классу .card-overlay значение z-index , равное 1 ?

Теперь наложение карты будет помещено перед card-info (у которого все еще есть z-index: 0 ), потому что он имеет более высокий порядок стека ( z-index: 1 ), а теперь цвет change on hover событие снова будет работать без перебоев - и это здорово, но...

К сожалению, это приведет к тому же результату, что и раньше, когда мы физически переместили элемент

ниже элемента
. На этот раз мы просто изменили порядок наложения напрямую с помощью CSS. Текстовые элементы: , все еще затенены наложением.

Это недопустимо!

Указатель событий спешит на помощь!

Я внезапно вспомнил, что CSS имеет свойство pointer-events , которое позволяет вам решить, должен ли элемент реагировать на события указателя.

События указателя - это все, что связано с действиями мыши, например щелчок, прокрутка или перемещение курсора мыши над элементом (наведение курсора).

Итак, я просто добавил событий-указателей: нет; на мой .card-info class, как его:

  .card-info {
  позиция: абсолютная;
  внизу: 2 бэр;
  слева: 2 бэр;
  указатель-события: нет;
}  

И теперь вы можете навести курсор на всю карту пользовательского интерфейса, включая текст, не отменяя событие наведения - и текстовые элементы сохранят свой 100% белый цвет:

Имя сотрудника

Роль сотрудника

Огромный успех!

Ознакомьтесь с кодом CodePen.

Показывать при наведении | Webflow University

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

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

Начнем с создания анимации при наведении курсора.

Сделаем так, чтобы ссылка блокировала триггер.Другими словами, с выбранным блоком ссылок мы будем следить за тем, чтобы при наведении курсора мыши (при наведении курсора на этот блок ссылок) запускалась анимация. (Мы проиграем анимацию, которую собираемся создать, при наведении курсора на этот блок ссылок.)

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

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

И все, что нам нужно делать после этого? Это вернуть в поле зрения сердце и цену. И мы можем сделать это сразу для нескольких элементов. Мы просто удерживаем Shift и выбираем второй элемент. Затем мы щелкнем правой кнопкой мыши или нажмем клавишу Control, чтобы дублировать.

Для этой анимации мы хотим переместить каждый из них обратно в начало координат.0 пикселей.

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

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

Это витает в воздухе. Давай займемся зависанием.

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

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

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

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

Давайте применим его к другим пончикам.

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

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

Результат? У нас есть анимация, которая отлично работает при наведении и выходе из каждого блока ссылок.

Наведение, фокус и другие состояния

 
module.exports = {
  
  варианты: {
    доступность: ['отзывчивый', 'фокус внутри', 'фокус'],
    alignContent: ['отзывчивый'],
    alignItems: ['отзывчивый'],
    alignSelf: ['отзывчивый'],
    анимация: ['отзывчивый'],
    внешний вид: ['отзывчивый'],
    backdropBlur: ['отзывчивый'],
    backdropBrightness: ['отзывчивый'],
    backdropContrast: ['отзывчивый'],
    backdropFilter: ['отзывчивый'],
    backdropGrayscale: ['отзывчивый'],
    backdropHueRotate: ['отзывчивый'],
    backdropInvert: ['отзывчивый'],
    backdropOpacity: ['отзывчивый'],
    backdropSaturate: ['отзывчивый'],
    backdropSepia: ['отзывчивый'],
    backgroundAttachment: ['отзывчивый'],
    backgroundBlendMode: ['отзывчивый'],
    backgroundClip: ['отзывчивый'],
    backgroundColor: ['отзывчивый', 'темный', 'групповое наведение', 'фокус внутри', 'наведение', 'фокус'],
    backgroundImage: ['отзывчивый'],
    backgroundOpacity: ['отзывчивый', 'темный', 'групповое наведение', 'фокус внутри', 'наведение', 'фокус'],
    backgroundPosition: ['отзывчивый'],
    backgroundRepeat: ['отзывчивый'],
    backgroundSize: ['отзывчивый'],
    backgroundOrigin: ['отзывчивый'],
    размытие: ['отзывчивый'],
    borderCollapse: ['отзывчивый'],
    borderColor: ['отзывчивый', 'темный', 'групповое наведение', 'фокус внутри', 'наведение', 'фокус'],
    borderOpacity: ['отзывчивый', 'темный', 'групповое наведение', 'фокус внутри', 'наведение', 'фокус'],
    borderRadius: ['отзывчивый'],
    borderStyle: ['отзывчивый'],
    borderWidth: ['отзывчивый'],
    boxDecorationBreak: ['отзывчивый'],
    boxShadow: ['отзывчивый', 'групповое наведение', 'фокус внутри', 'наведение', 'фокус'],
    boxSizing: ['отзывчивый'],
    яркость: ['отзывчивый'],
    ясно: ['отзывчивый'],
    контейнер: ['отзывчивый'],
    контраст: ['отзывчивый'],
    курсор: ['отзывчивый'],
    дисплей: ['отзывчивый'],
    DivineColor: ['отзывчивый', 'темный'],
    DivideOpacity: ['отзывчивый', 'темный'],
    DivineStyle: ['отзывчивый'],
    DivideWidth: ['отзывчивый'],
    dropShadow: ['отзывчивый'],
    fill: ['отзывчивый'],
    фильтр: ['отзывчивый'],
    flex: ['отзывчивый'],
    flexDirection: ['отзывчивый'],
    flexGrow: ['отзывчивый'],
    flexShrink: ['отзывчивый'],
    flexWrap: ['отзывчивый'],
    float: ['отзывчивый'],
    fontFamily: ['отзывчивый'],
    fontSize: ['отзывчивый'],
    fontSmoothing: ['отзывчивый'],
    fontStyle: ['отзывчивый'],
    fontVariantNumeric: ['отзывчивый'],
    fontWeight: ['отзывчивый'],
    пробел: ['отзывчивый'],
    gradientColorStops: ['отзывчивый', 'темный', 'наведение', 'фокус'],
    оттенки серого: ['отзывчивый'],
    gridAutoColumns: ['отзывчивый'],
    gridAutoFlow: ['отзывчивый'],
    gridAutoRows: ['отзывчивый'],
    gridColumn: ['отзывчивый'],
    gridColumnEnd: ['отзывчивый'],
    gridColumnStart: ['отзывчивый'],
    gridRow: ['отзывчивый'],
    gridRowEnd: ['отзывчивый'],
    gridRowStart: ['отзывчивый'],
    gridTemplateColumns: ['отзывчивый'],
    gridTemplateRows: ['отзывчивый'],
    высота: ['отзывчивый'],
    hueRotate: ['отзывчивый'],
    вставка: ['отзывчивый'],
    инвертировать: ['отзывчивый'],
    изоляция: ['отзывчивый'],
    justifyContent: ['отзывчивый'],
    justifyItems: ['отзывчивый'],
    justifySelf: ['отзывчивый'],
    letterSpacing: ['отзывчивый'],
    lineHeight: ['отзывчивый'],
    listStylePosition: ['отзывчивый'],
    listStyleType: ['отзывчивый'],
    маржа: ['отзывчивый'],
    maxHeight: ['отзывчивый'],
    maxWidth: ['отзывчивый'],
    minHeight: ['отзывчивый'],
    minWidth: ['отзывчивый'],
    mixBlendMode: ['отзывчивый'],
    objectFit: ['отзывчивый'],
    objectPosition: ['отзывчивый'],
    непрозрачность: ['отзывчивый', 'групповое наведение', 'фокус внутри', 'наведение', 'фокус'],
    заказ: ['отзывчивый'],
    наброски: ['отзывчивый', 'фокус внутри', 'фокус'],
    переполнение: ['отзывчивый'],
    overscrollBehavior: ['отзывчивый'],
    обивка: ['отзывчивый'],
    placeContent: ['отзывчивый'],
    placeItems: ['отзывчивый'],
    placeSelf: ['отзывчивый'],
    placeholderColor: ['отзывчивый', 'темный', 'фокус'],
    placeholderOpacity: ['отзывчивый', 'темный', 'фокус'],
    pointerEvents: ['отзывчивый'],
    позиция: ['отзывчивый'],
    изменить размер: ['отзывчивый'],
    ringColor: ['отзывчивый', 'темный', 'фокус внутри', 'фокус'],
    ringOffsetColor: ['отзывчивый', 'темный', 'фокус внутри', 'фокус'],
    ringOffsetWidth: ['отзывчивый', 'фокус внутри', 'фокус'],
    ringOpacity: ['отзывчивый', 'темный', 'фокус внутри', 'фокус'],
    ringWidth: ['отзывчивый', 'фокус внутри', 'фокус'],
    вращать: ['отзывчивый', 'наведение', 'фокус'],
    насыщать: ['отзывчивый'],
    масштаб: ['отзывчивый', 'наведение', 'фокус'],
    сепия: ['отзывчивый'],
    перекос: ['отзывчивый', 'наведение', 'фокус'],
    пробел: ['отзывчивый'],
    ход: ['отзывчивый'],
    strokeWidth: ['отзывчивый'],
    tableLayout: ['отзывчивый'],
    textAlign: ['отзывчивый'],
    textColor: ['отзывчивый', 'темный', 'групповое наведение', 'фокус внутри', 'наведение', 'фокус'],
    textDecoration: ['отзывчивый', 'групповое наведение', 'фокус внутри', 'наведение', 'фокус'],
    textOpacity: ['отзывчивый', 'темный', 'групповое наведение', 'фокус внутри', 'наведение', 'фокус'],
    textOverflow: ['отзывчивый'],
    textTransform: ['отзывчивый'],
    преобразовать: ['отзывчивый'],
    transformOrigin: ['отзывчивый'],
    transitionDelay: ['отзывчивый'],
    transitionDuration: ['отзывчивый'],
    transitionProperty: ['отзывчивый'],
    transitionTimingFunction: ['отзывчивый'],
    перевод: ['отзывчивый', 'наведение', 'фокус'],
    userSelect: ['отзывчивый'],
    verticalAlign: ['отзывчивый'],
    видимость: ['отзывчивый'],
    пробел: ['отзывчивый'],
    ширина: ['отзывчивый'],
    wordBreak: ['отзывчивый'],
    zIndex: ['отзывчивый', 'фокус внутри', 'фокус']
  }
}  

Как реализовать наведение курсора мыши или наведение курсора в Vue

В CSS довольно легко изменить что-то при наведении курсора на .Мы просто используем : hover psuedo-class:

 .item {
  фон: синий;
}

.item: hover {
  фон: зеленый;
} 

В Vue это немного сложнее, потому что у нас нет встроенной функции.

Большую часть этого мы должны реализовать сами.

Но не волнуйтесь, это не , что много работает.

Из этой короткой статьи вы узнаете:

  • Как реализовать эффект зависания в Vue
  • Как показать элемент при наведении курсора мыши
  • Как динамически обновлять классы с наведением курсора мыши
  • Как это сделать даже на пользовательских компонентах Vue

Прослушивание нужных событий

Итак, какие события нам нужно слушать?

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

Чтобы отслеживать, когда мышь уходит, мы будем использовать событие mouseleave.

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

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

Что мы будем использовать вместо этого, спросите вы?!?

Вместо этого мы будем использовать событие mouseover.

Событие mouseover работает почти так же, как mouseenter . Основное отличие состоит в том, что наведены на пузырей, как и большинство других событий DOM. Вместо того, чтобы создавать массу уникальных событий, есть только одно - сделать это намного быстрее!

Давайте подключим

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

Мы также будем использовать сокращенное обозначение v-on .

Вместо того, чтобы писать v-on: event , мы можем просто написать @event .

Вот как мы это подключаем:

 <шаблон>
  
 экспорт по умолчанию {
  данные() {
    возвращение {
      hover: false,
    };
  }
} 

Теперь реактивное свойство hover всегда будет отражать, находится ли мышь над элементом или нет!

Отображение элемента при наведении курсора

Если вы хотите показать элемент, основанный на состоянии наведения, вы можете связать это с директивой v-if:

 <шаблон>
  
<диапазон @ mouseover = "hover = true" @ mouseleave = "hover = false" > Наведите на меня, чтобы показать сообщение! Это секретное сообщение.
 экспорт по умолчанию {
  данные() {
    возвращение {
      hover: false,
    };
  }
} 

Всякий раз, когда вы наводите указатель мыши на Наведите на меня, чтобы показать сообщение! , секретное сообщение появится!

Переключение классов при наведении курсора

Вы также можете сделать то же самое для переключения классов:

 <шаблон>
  
<диапазон @ mouseover = "hover = true" @ mouseleave = "hover = false" : class = "{active: hover}" > Наведите на меня, чтобы сменить фон!
 экспорт по умолчанию {
  данные() {
    возвращение {
      hover: false,
    };
  }
} 
.active {
  фон: зеленый;
} 

Хотя это работает, это не лучшее решение.

Для чего-то вроде этого лучше просто использовать CSS:

 <шаблон>
  
    Наведите на меня, чтобы сменить фон!
  
 
 span: hover {
  фон: зеленый;
} 

Как видите, хотя мы можем сделать это с помощью Vue, он нам не нужен для достижения этого эффекта.

Наведение на компонент Vue

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

Вы не можете прослушивать события mouseover и mouseleave , как мы это делали раньше.

Если ваш компонент Vue не генерирует эти события, мы не можем их прослушивать.

Вместо этого мы можем добавить модификатор событий .native для прослушивания событий DOM непосредственно в нашем пользовательском компоненте Vue:

 <шаблон>
  <мой-пользовательский-компонент
    @ mouseover.native = "hover = true"
    @ mouseleave.native = "hover = false"
  />
 
 экспорт по умолчанию {
  данные() {
    возвращение {
      hover: false,
    };
  }
} 

Используя .native , мы слушаем собственные события DOM вместо тех, которые генерируются компонентом Vue.

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

Заключение

Вот и все!

Для достижения эффекта наведения курсора на Vue JS требуется совсем немного кода.

Теперь вы можете делать что угодно, когда кто-то наводит курсор на ваше приложение Vue.

всплывающих подсказок · Bootstrap

Документация и примеры для добавления пользовательских всплывающих подсказок Bootstrap с помощью CSS и JavaScript с использованием CSS3 для анимации и атрибутов данных для локального хранилища заголовков.

Обзор

Что нужно знать при использовании плагина всплывающей подсказки:

  • Всплывающие подсказки полагаются на стороннюю библиотеку Popper.js для позиционирования. Вы должны включить popper.min.js перед bootstrap.js или использовать bootstrap.bundle.min.js / bootstrap.bundle.js , который содержит Popper.js, чтобы всплывающие подсказки работали!
  • Если вы создаете наш JavaScript из исходного кода, для этого требуется util.js .
  • Подсказки
  • используются по соображениям производительности, поэтому вы должны инициализировать их самостоятельно. .
  • Всплывающие подсказки с заголовками нулевой длины никогда не отображаются.
  • Укажите контейнер : 'body' , чтобы избежать проблем с рендерингом в более сложных компонентах (например, в наших группах ввода, группах кнопок и т. Д.).
  • Всплывающие подсказки для скрытых элементов не работают.
  • Всплывающие подсказки для .disabled или disabled элементов должны запускаться для элемента оболочки.
  • При запуске из гиперссылок, охватывающих несколько строк, всплывающие подсказки будут центрированы.Используйте white-space: nowrap; на вашем s, чтобы избежать такого поведения.
  • Всплывающие подсказки должны быть скрыты до того, как соответствующие им элементы будут удалены из модели DOM.

Поняли? Отлично, давайте посмотрим, как они работают, на некоторых примерах.

Один из способов инициализировать все всплывающие подсказки на странице - выбрать их по их атрибуту data-toggle :

  $ (function () {
  $ ('[data-toggle = "tooltip"]'). tooltip ()
})  

Примеры

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

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

  


  

И с добавлением собственного HTML:

    

Использование

Плагин всплывающих подсказок генерирует контент и разметку по запросу и по умолчанию помещает всплывающие подсказки после их триггерного элемента.

Запуск всплывающей подсказки через JavaScript:

  $ ('# example'). Tooltip (options)  

Markup

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

Создание всплывающих подсказок для пользователей клавиатуры и вспомогательных технологий

Вы должны добавлять всплывающие подсказки только к элементам HTML, которые традиционно ориентированы на клавиатуру и являются интерактивными (например, ссылки или элементы управления формы).Хотя произвольные элементы HTML (например, s) можно сделать доступными для фокусировки, добавив атрибут tabindex = "0" , это добавит потенциально раздражающие и сбивающие с толку позиции табуляции на неинтерактивных элементах для пользователей клавиатуры. Кроме того, большинство вспомогательных технологий в настоящее время не объявляют всплывающую подсказку в этой ситуации.

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

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


Текст всплывающей подсказки!

Отключенные элементы

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

или , в идеале сделанной с фокусировкой на клавиатуре, используя tabindex = "0" , и переопределить события указателя на отключенный элемент.

Опции

Параметры могут передаваться через атрибуты данных или JavaScript. Для атрибутов данных добавьте имя параметра к data- , как в data-animation = "" .

Номер Номер
Имя Тип По умолчанию Описание
анимация логическое правда Применить переход CSS fade к всплывающей подсказке
контейнер строка | элемент | ложь ложь

Добавляет всплывающую подсказку к определенному элементу.Пример: контейнер: 'body' . Этот параметр особенно полезен тем, что позволяет вам располагать всплывающую подсказку в потоке документа рядом с элементом запуска, что предотвратит отрыв всплывающей подсказки от элемента запуска во время изменения размера окна.

задержка | объект 0

Задержка показа и скрытия всплывающей подсказки (мс) - не применяется к ручному типу запуска

Если указан номер, задержка применяется к скрытию / отображению

Структура объекта: задержка: {"show": 500, "hide": 100}

HTML логическое ложь

Разрешить HTML во всплывающей подсказке.

Если true, HTML-теги в заголовке всплывающей подсказки будут отображаться во всплывающей подсказке. Если false, метод jQuery text будет использоваться для вставки содержимого в DOM.

Используйте текст, если вас беспокоят XSS-атаки.

размещение строка | функция верх

Как разместить всплывающую подсказку - авто | наверх | внизу | слева | Правильно.
Если указано auto , всплывающая подсказка будет динамически переориентирована.

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

селектор строка | ложь ложь Если предусмотрен селектор, объекты всплывающей подсказки будут делегированы указанным целям. На практике это используется для включения всплывающих окон динамического HTML-содержимого.См. Этот и информативный пример.
шаблон строка '
'

Базовый HTML-код для использования при создании всплывающей подсказки.

Заголовок всплывающей подсказки будет вставлен в .tooltip-inner .

.arrow станет стрелкой всплывающей подсказки.

Самый внешний элемент оболочки должен иметь .tooltip class и role = "tooltip" .

титул строка | элемент | функция '

Значение заголовка по умолчанию, если атрибут заголовок отсутствует.

Если функция задана, она будет вызываться с этой ссылкой , установленной на элемент, к которому прикреплена всплывающая подсказка.

триггер строка 'парящий фокус'

Как запускается всплывающая подсказка - щелкните | парить | фокус | руководство по эксплуатации.Вы можете передать несколько триггеров; разделите их пробелом.

'manual' указывает, что всплывающая подсказка будет запускаться программно с помощью методов .tooltip ('show') , .tooltip ('hide') и .tooltip ('toggle') ; это значение нельзя комбинировать с каким-либо другим триггером.

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

смещение | строка 0 Смещение всплывающей подсказки относительно цели. Для получения дополнительной информации обратитесь к документации по смещению Popper.js.
резервное размещение строка | массив 'переворот' Позволяет указать, какую позицию Поппер будет использовать при откате. Для получения дополнительной информации см. Поведение Popper.js docs
граница строка | элемент 'scrollParent' Граница ограничения переполнения всплывающей подсказки.Принимает значения 'viewport' , 'window' , 'scrollParent' или ссылку HTMLElement (только JavaScript). Для получения дополнительной информации обратитесь к документации Popper.js preventOverflow.
Атрибуты данных для отдельных всплывающих подсказок

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

Методы

Асинхронные методы и переходы

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

См. Нашу документацию по JavaScript для получения дополнительной информации.

$ (). Подсказка (опции)

Присоединяет обработчик всплывающей подсказки к коллекции элементов.

.tooltip ('показать')

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

  $ ('# element'). Tooltip ('show')  
.tooltip ('hide')

Скрывает всплывающую подсказку элемента. Возврат к вызывающей стороне до того, как всплывающая подсказка была фактически скрыта (то есть до того, как произойдет событие hidden.bs.tooltip ). Это считается «ручным» запуском всплывающей подсказки.

  $ ('# element'). Tooltip ('hide')  
.tooltip ('toggle')

Переключает всплывающую подсказку элемента. Возврат к вызывающей стороне до того, как всплывающая подсказка была фактически показана или скрыта (то есть до того, как произойдет событие shown.bs.tooltip или hidden.bs.tooltip ). Это считается «ручным» запуском всплывающей подсказки.

  $ ('# element'). Tooltip ('toggle')  
.tooltip ('dispose')

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

  $ ('# element'). Tooltip ('dispose')  
.tooltip ('enable')

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

  $ ('# element'). Tooltip ('enable')  
.tooltip ('disable')

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

  $ ('# element'). Tooltip ('disable')  
.tooltip ('toggleEnabled')

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

  $ ('# element'). Tooltip ('toggleEnabled')  
.tooltip ('update')

Обновляет положение всплывающей подсказки элемента.

  $ ('# element'). Tooltip ('update')  

События

Показан
Тип события Описание
показать.bs.tooltip Это событие возникает сразу после вызова метода экземпляра show .
.bs.tooltip Это событие вызывается, когда всплывающая подсказка становится видимой для пользователя (ожидает завершения переходов CSS).
hide.bs.tooltip Это событие запускается сразу после вызова метода экземпляра hide .
hidden.bs.всплывающая подсказка Это событие запускается, когда всплывающая подсказка перестала быть скрытой от пользователя (будет ожидать завершения переходов CSS).
вставлен. Инструмент. Наконечник Это событие запускается после события show.bs.tooltip , когда шаблон всплывающей подсказки был добавлен в DOM.
  $ ('# myTooltip'). On ('hidden.bs.tooltip', function () {
  // сделай что-нибудь…
})  

Как удалить CSS: поведение при наведении курсора из элемента

Решения с использованием CSS¶

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

В приведенном ниже примере у нас есть несколько кнопок, созданных с помощью элементов

. Мы устанавливаем отображение класса «button» на «inline-block» и продолжаем стилизацию этого класса, задав свойства border-radius, border, background, cursor, padding и margin. Мы добавляем псевдокласс: hover к классам «button-blue» и «button-green», но отключаем это поведение для класса «disabled» с помощью свойства pointer-events.

Пример удаления поведения при наведении с помощью свойства CSS pointer-events: ¶

  

  
     Название документа 
    <стиль>
      .отключен {
        указатель-события: нет;
        непрозрачность: 0,3;
      }
      .кнопка {
        радиус границы: 20 пикселей;
        отступ: 10 пикселей 15 пикселей;
        граница: 1px solid # 000;
        фон: # b5b3b3;
        курсор: указатель;
        дисплей: встроенный блок;
        маржа: 10 пикселей;
      }
      .button-blue: hover {
        фон: # 75a4fa;
      }
      .button-green: hover {
        фон: # 53e05a;
      }
    
  
  
    
Наведите указатель мыши на эту синюю кнопку

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

Это отключенная синяя кнопка

Это неактивная зеленая кнопка
Попробуйте сами »

Результат

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

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

Это отключенная синяя кнопка

Это отключенная зеленая кнопка

Обратите внимание, что это также отключит Javascript события на этом элементе.

В следующем примере у нас есть два класса и только один из них style с псевдоклассом: hover.

Пример применения поведения наведения только к одному классу: ¶

  

  
     Название документа 
    <стиль>
      .тестовое задание {
        граница: 0px;
      }
      .testhover: hover {
        граница: 1px solid # 0814bf;
      }
    
  
  
    
Текст с отключенным эффектом наведения
Наведите курсор на этот текст
Попробуйте сами »

В нашем последнем примере мы используем псевдокласс: not (), чтобы удалить поведение при наведении курсора на указанный класс.

Пример удаления поведения при наведении курсора на элемент с помощью псевдокласса CSS: not (): ¶

  

  
     Название документа 
    <стиль>
      .		
Оставить комментарий

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

Ваш адрес email не будет опубликован.

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

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