Hover jq: .hover() | jQuery API Documentation

Кросс­браузерные input number и select с возможностью изменения стилей

.custom_number.jq-number{

display: inline-block;

position: relative;

font-size: 0;

}

.custom_number.jq-number .custom_number{

font-size: 13.3333px;

padding-right: 14px;

width: 100%;

height: 100%;

}

.custom_number.jq-number:hover .jq-number__spin{

opacity: 1;

}

.custom_number.jq-number.focused .jq-number__spin{

opacity: 1;

}

.custom_number .jq-number__field{

display: inline-block;

width: 100%;

height: 100%;

}

.custom_number .jq-number__spin{

position: absolute;

right: 1px;

opacity: 0;

width: 14px;

background: #dfdede;

height: 8px;

max-height: calc(50% — 1px);

display: flex;

align-items: center;

justify-content: center;

}

.custom_number .jq-number__spin:hover{

background: #b4b4b4;

}

.custom_number .jq-number__spin:active{

background: #3f3f3f;

}

.custom_number .jq-number__spin:after{

content: »;

width: 6px;

height: 4px;

border-style: solid;

}

.custom_number .jq-number__spin.minus{

top: 50%;

}

.custom_number .jq-number__spin.minus:after{

border-width: 4px 3px 0 3px;

border-color: #616161 transparent transparent transparent;

}

.custom_number .jq-number__spin.minus:hover:after{

border-color: #000 transparent transparent transparent;

}

.custom_number .jq-number__spin.minus:active:after{

border-color: #fff transparent transparent transparent;

}

.custom_number .jq-number__spin.plus{

bottom: 50%;

}

.custom_number .jq-number__spin.plus:after{

border-width: 0 3px 4px 3px;

border-color: transparent transparent #616161 transparent;

}

.custom_number .jq-number__spin.plus:hover:after{

border-color: transparent transparent #000 transparent;

}

.custom_number .jq-number__spin.plus:active:after{

border-color: transparent transparent #fff transparent;

}

Управление образования Советского района

::after (:after) — CSS | MDN

В CSS, ::after создаёт псевдоэлемент, который является последним потомком выбранного элемента. Часто используется для добавления косметического содержимого в элемент с помощью свойства content. По умолчанию является инлайновым.

a::after {
  content: "→";
}

/* CSS3 syntax */
::after

/* CSS2 syntax */
:after

В CSS3 появилась запись ::after (с двумя двоеточиями) для различения псевдоклассов и псевдоэлементов. Браузеры также поддерживают запись :after, введённую в CSS2.

Простое использование

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

HTML

<p>Вот простой скучный текст.</p>
<p>Вот нормальный текст, который не является ни скучным, ни потрясающим.</p>
<p>Помогать MDN легко и весело.
Просто нажмите кнопку редактирования, чтобы добавить новые живые примеры, или улучшить существующие примеры.</p>

CSS

.exciting-text::after {
  content: "<- теперь это *просто* потрясающе!";
  color: green;
}

.boring-text::after {
   content: "<- СКУЧНО!";
   color: red;
}

Результат

Пример оформления

Можно стилизовать текст или изображения в свойстве content практически любым способом.

HTML

<span>Посмотрите, где находится оранжевый прямоугольник.</span>

CSS

.ribbon {
  background-color: #5BC8F7;
}

.ribbon::after {
  content: "Посмотрите на этот оранжевый прямоугольник.";
  background-color: #FFBA10;
  border-color: black;
  border-style: dotted;
}

Результат

Подсказки

Следующий пример показывает использование псевдоэлемента ::after в сочетании с CSS-выражением attr() и пользовательского data-* атрибута data-descr для создания подсказки на чистом CSS.

HTML

<p>Здесь находится живой пример вышеприведённого кода.<br />
  У нас есть некоторый <span data-descr="коллекция слов и знаков препинаний">текст</span> здесь с несколькими
  <span data-descr="маленькие всплывающие окошки, которые снова исчезают">подсказками</span>.<br />
  Не стесняйтесь, наводите мышку чтобы <span data-descr="не понимать буквально">взглянуть</span>.
</p>

CSS

span[data-descr] {
  position: relative;
  text-decoration: underline;
  color: #00F;
  cursor: help;
}

span[data-descr]:hover::after {
  content: attr(data-descr);
  position: absolute;
  left: 0;
  top: 24px;
  min-width: 200px;
  border: 1px #aaaaaa solid;
  border-radius: 10px;
  background-color: #ffffcc;
  padding: 12px;
  color: #000000;
  font-size: 14px;
  z-index: 1;
}

Результат

BCD tables only load in the browser

Подсказка | jQuery UI

Настраиваемые всплывающие подсказки, заменяющие собственные всплывающие подсказки.

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

просмотреть исходный код

 
    
 
    
 
    
 
    
 
  < script src = "https://code.jquery.com/jquery-1.12.4.js">   
 
    
 
  
  всплывающие подсказки  можно прикрепить к любому элементу .Когда вы наводите указатель мыши на элемент  
 
 , атрибут заголовка отображается в небольшом поле рядом с элементом, как в собственной всплывающей подсказке. 
  
 
  
 Но поскольку это не так встроенная всплывающая подсказка, ее можно стилизовать. Любые темы, созданные с помощью  
 
   ThemeRoller   
 
 , также будут стилизованы всплывающие подсказки соответственно.
  
 
  
 Всплывающие подсказки также полезны для элементов формы, чтобы показать дополнительную информацию в контексте каждого поля. 
  
 
  
  Ваш возраст:   
  
 
  
 Наведите курсор на поле, чтобы увидеть всплывающую подсказку. 
  
 

Хотите узнать больше о виджете всплывающей подсказки? Проверьте
Документация по API.

21 jQuery Hover Effects

Коллекция бесплатных jQuery hover effect примеров и плагинов для изображений, таблиц, текста и прочего. Обновление коллекции за январь 2018 г. 6 новинок.

1. CSS эффекты наведения
2. Bootstrap Hover Effects

Автор

• Алекс С. Лерида
• 10 апреля 2020

О коде

High Five Hover Effect

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: gsap.js

Автор

• Алисса Икс
• 21 февраля 2019

О коде

Портфолио Hover

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

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: параллакс.js

Автор

• Джошуа Уорд
• 7 ноября 2018

Сделано из

• HTML (Мопс) / CSS (SCSS) / JS

О коде

Всплывающая страница при наведении курсора

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

О коде

Легкое искажение изображения при повороте 3D-изображения

Это пример эффекта зависания 3D-искажения в jQuery.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: jquery-ui.css, tweenmax.js

Автор

• Крейг Роблевски
• 4 мая 2018 г.

О коде

Быстрое разбитое стекло на Ховере

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: tweenmax.js

О коде

Анимация наведения

Анимация и изменение размера «горячей точки» при наведении курсора и уменьшение ее размера при наведении курсора.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: tweenmax.js

Сделано в

• Gijs Rogé
• 13 января 2017

О плагине

Наклон.js

Крошечный запросAnimationFrame работает с легким эффектом параллакса и наклона 60+ кадров в секунду для jQuery.

Сделано в

• Франсиско Данс
• 1 марта 2016 г.

О плагине

Маржинальные ноты

Marginotes берет ваш выбор jQuery и добавляет примечания к полям с текстом, предоставленным в атрибутах HTML.

Сделано в

• Брайан Черне
• 21 февраля 2011 г.

О плагине

Подключаемый модуль HoverIntent для jQuery

hoverIntent — это подключаемый модуль, который пытается определить намерение пользователя… как хрустальный шар, только движением мыши! Он похож на метод зависания jQuery. Однако вместо немедленного вызова функции handlerIn hoverIntent ожидает, пока мышь пользователя не замедлится достаточно, прежде чем выполнять вызов.

Почему? Чтобы отложить или предотвратить случайное срабатывание анимации или вызовов ajax. Простые тайм-ауты работают для небольших областей, но если ваша целевая область велика, они могут выполняться независимо от намерения. Вот где на помощь приходит hoverIntent …

Сделано в

• Джошуа Халл
• 23 февраля 2013 г.

О плагине

Спойлер

Не портите! Скройте копии и изображения с небольшим размытием SVG.Попробуйте навести курсор мыши. Ешьте по щелчку. Вы публикуете спойлеры? Хотели бы вы, чтобы они были на вашей странице не чертовски грубо? С предупреждением о спойлере! ты можешь! Скройте спойлеры с небольшим размытием.

Сделано в

• ctrl-уроды
• 27 ноября 2012 г.

О плагине

Freezeframe.js

Freezeframe.js — это сценарий, который приостанавливает анимацию .gif-файлов и позволяет им анимировать при наведении / щелчке мыши / событии касания или с функциями триггера / отпускания.Он поддерживает адаптивные изображения и работает как плагин jQuery.

Сделано в

• Эмерсон Томпсон
• 2 января 2016 г.

О плагине

ZooMove

Это плагин, разработанный с помощью jQuery, который позволяет динамически масштабировать изображения с помощью мыши и просматривать детали с помощью мыши. Совместимость с: jQuery 1.7+ в Chrome 42+, Firefox 41+, Safari 9+, Opera 29+, Internet Explorer 9+.

Сделано в

• Риан Ариона
• 11 марта 2016

О плагине

jQuery Hover3d

jQuery Hover3d — простой скрипт наведения для создания эффекта трехмерного наведения. Это был мой эксперимент по изучению 3D-преобразования CSS3 еще в 2015 году на эффекте парящей плоскости Codepen 3D. Идея состоит в том, чтобы преобразовать элемент в трехмерное пространство с помощью преобразования CSS3, поиграть с translateZ для размещения элементов и определить движение мыши для изменения значения преобразования.

Сделано в

• Гаюс Куйзинас
• 1 апреля 2014 г.

О плагине

целиком

Плагин

jQuery, используемый для выбора всей строки и столбца таблицы в ответ на события mouseenter и mouseleave . Полностью поддерживает макеты таблиц, которые используют colspan и rowspan .

Сделано в

• Джеймс Гарбут
• 16 ноября 2013 г.

О плагине

Пикселизация

Пикселизация.js — это простая библиотека и плагин jQuery для пикселизации любого набора изображений и, при желании, их отображения при наведении курсора.

Сделано в

• Прашант Чаудхари
• 23 декабря 2012 г.

О плагине

Hovercard

Бесплатный легкий плагин jQuery, который позволяет отображать связанную информацию с пометкой, ссылкой или любым элементом HTML по вашему выбору.

Функции

• плавно превращает имя в зависшую карту (на месте)
• использует минимум CSS и внешние таблицы стилей для загрузки
• полный контроль над html для отображения
• поставляется со встроенной картой наведения в Twitter и Facebook
• поддерживает функции обратного вызова при наведении и наведении
• автоматическая регулировка по краям области просмотра

Сделано в

• Натан Руцки
• 15 мая 2015

О плагине

jQuery.кончик мыши

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

О плагине

Реактивный слушатель

Демонстрирует реакцию на раздражитель.

Сделано в

• Могели лорткипанидзе
• 8 июля 2016 г.

О плагине

HoverSlippery

Плагин jQuery для выполнения крутых наведений при встроенной навигации.

Сделано в

• Ева Вайнберг
• 15 января 2017

О плагине

искр

Плагин jQuery для добавления блесток чему угодно при наведении курсора.

Сделано в

• Кребс Аттила
• 23 мая 2017 г.

О плагине

jQuery-пластина

Простой в использовании плагин jQuery для добавления красивого 3D-эффекта наведения на любой элемент.

Функции

19 крутых плагинов для jQuery Image Hover — Bashooka

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

Применяет 2D / 3D-анимацию наведения с учетом направления к изображениям или любым другим элементам.

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

Этот плагин создает эффект затухания изображения при наведении курсора мыши. Кроме того, вы можете выбрать фильтр цветовых тонов для своих изображений. Для изображений устанавливается тон, когда они не зависают. При наведении курсора на него будет удален фильтр «Цветной щипец», так что будет четкое различие между этим выбранным изображением и другими невыбранными изображениями.Вам не нужно готовить несколько наборов изображений, также вы можете изменить цветовой тон с помощью javascript.

Zalki — это плагин jQuery для анимации наведения изображения. Кроссбраузерность даже в IE 7 (даже непрозрачность). Легко использовать и настраивать. Поддерживает тридцать анимационных эффектов от jQuery Easing. Нет необходимости регулировать размер емкости. Плагин определит размер ваших фотографий и автоматически настроит параметры, даже если на одной странице есть фотографии разных размеров.

HoverEx — это плагин jQuery для анимации наведения изображения. Он содержит более 36 анимаций и подготовленных 18 шаблонов анимации наведения. Он также поддерживает масштабирование изображения и эффект ползунка. Вы можете использовать его для создания уникальных анимационных эффектов без каких-либо усилий, не зная jQuery. сделайте нужную разметку html, она вам подойдет.

Этот плагин позволяет быстро и легко добавлять кнопки социальных сетей к изображениям на лету, делая их мгновенно «доступными» для Pinterest, Facebook, Twitter, Google Plus, Reddit и других.Более того, эффекты при наведении шелковисто плавные, кроссбраузерные и доступны в нескольких стилях!

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

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

jSquares — это плагин jQuery, который отображает изображение и описание в оверлее при наведении курсора. Он в основном идентичен сетке изображений. Прекрасно работает в IE6 +, FF 3+, Safari 3+ и Opera 10.

Adipoli — это простой плагин jQuery, используемый для создания стильных эффектов наведения изображения.

iPicture — это подключаемый модуль jQuery для создания интерактивных изображений с дополнительными описаниями.

Код использует свойства CSS3 box-shadow и border-radius для создания увеличительного стекла. Jquery используется для позиционирования его в координатах курсора и соответствующего изменения положения фона.

Быстрый способ добавить на ваш сайт слайд-шоу на базе jQuery, реагирующее на наведение, с быстрой сменой циклов.

Не портите! Скройте что-нибудь с небольшим размытием. Подсказка на наведение курсора. Раскрыть по щелчку.

Hoverizr — действительно маленький (2.5KB minified) отзывчивый плагин jQuery, который выводит обработанные изображения поверх (или ниже) ваших целевых изображений. В настоящее время в нем есть три эффекта: оттенки серого, размытие и инверсия цвета. Автоматически, когда вы наводите указатель мыши на целевые элементы, верхний элемент исчезает, показывая нижний элемент, будь то исходное изображение или измененное изображение.

Легкий (2 КБ мин) подключаемый модуль jQuery, который обрабатывает преобразования CSS3 при наведении курсора, которые работают в кросс-браузере IE8 +. Работает во всех современных браузерах Chrome, Firefox, Safari, IE.Старые браузеры IE9, IE8.

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

PowerTip — это плагин всплывающей подсказки jQuery с гибким дизайном, который легко настраивать. Реализация проста и легко настраивается, имеет плавные нарастания и исчезновения, и даже дает вам несколько различных способов использования этих всплывающих подсказок (включая сложный контент).

20 лучших плагинов всплывающих подсказок с открытым исходным кодом, созданных с помощью CSS, jQuery и JavaScript

Лучшие бесплатные плагины всплывающих подсказок, известные Google.

[Примечание редактора: в более ранней версии этой статьи перечислялось 73 подключаемых модулей всплывающих подсказок. Это было похоже на … много. Мы сократили список до 20 пунктов, потому что иногда меньше — значит больше.]

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

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

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

20 бесплатных всплывающих подсказок

1. Tooltipster

Язык (и): jQuery
Что нам в нем нравится: Плагин для создания чистых, современных всплывающих подсказок с множеством возможных взаимодействий, тем и триггеров .

2. Tippy.js

Язык (и): JavaScript
Что нам в нем нравится: Полностью настраиваемая ванильная библиотека всплывающих подсказок JS со множеством возможных взаимодействий, анимации и тем. Может содержать HTML и имеет множество функций, таких как вложение раскрывающихся списков и смещение курсора.

3. CSS Tooltip

Язык (и): CSS
Что нам в нем нравится: Простая всплывающая подсказка с плавной анимацией, созданной с помощью HTML и CSS.

4. Всплывающая подсказка

Язык (и): CSS
Что нам в нем нравится: Простая всплывающая подсказка, созданная с использованием плавной анимации.

5. Grumble.js

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

6. Protip

Язык (и): jQuery
Что нам в нем нравится: Замысловатая всплывающая подсказка с несколькими скинами, размещениями и анимациями, разработанная для «любой ситуации».

7. Чаевые

Язык (и): JavaScript
Что нам в нем нравится: Очень простое решение для подсказок на JavaScript с несколькими скинами, размерами и вариантами взаимодействия.

8. Microtip

Язык (и): CSS
Что нам в нем нравится: Современная, минимальная и очень легкая библиотека всплывающих подсказок только для CSS.

9. Автоматические всплывающие подсказки

Язык (и): Javascript
Что нам в нем нравится: Полностью настраиваемые всплывающие подсказки, которые можно автоматически позиционировать.

10. JBox

Язык (и): jQuery
Что нам в нем нравится: Мощный и гибкий плагин, который также имеет модальные окна и уведомления. Легкий, настраиваемый и отзывчивый.

11. Венк

Язык (и): CSS
Что нам в нем нравится: Доступна облегченная всплывающая подсказка, сделанная с помощью CSS.Можно легко стилизовать с помощью атрибутов или классов.

12. Crumble

Язык (и): jQuery
Что нам в нем нравится: Интерактивные обзоры функций jquery. Причудливый стиль пузыря визуально интересен. Требуется grumble.js (см. Выше).

13.

Intro.js

Язык (и): JavaScript
Что нам в нем нравится: Мощная, универсальная библиотека функций продукта для пошаговых инструкций. Никаких зависимостей, удобный.

14. Динамический текст всплывающей подсказки

Язык (и): CSS
Что нам в этом нравится: Напишите динамический текст всплывающей подсказки без JavaScript, который изменяется в зависимости от состояния кнопки.

15. Toolbar.Js

Язык (и): jQuery
Что нам в нем нравится: Маленький изящный плагин jQuery, который создает панели инструментов в стиле всплывающих подсказок для веб-приложений и веб-сайтов.

16. Simptip

Язык (и): CSS
Что нам в нем нравится: Всплывающая подсказка CSS, созданная с помощью Sass, что довольно круто.

17. HubSpot Tooltip‍

Язык (и): JavaScript, CSS
Что нам в нем нравится: Библиотека JS и CSS для создания настраиваемых всплывающих подсказок. Построен на Tether and Drop.

18. Адаптивная всплывающая подсказка

Язык (и): CSS
Что нам в нем нравится: Простая маленькая адаптивная всплывающая подсказка, которая появляется при наведении курсора.

19. Tootik

Язык (и): CSS
Что нам в нем нравится: Библиотека всплывающих подсказок на чистом CSS / SCSS / LESS с простыми параметрами настройки.Легко использовать.

20. Первая буква всплывающая подсказка свойства CSS

Язык (и): CSS
Что нам в нем нравится: Простая всплывающая подсказка с тонкой анимацией постепенного появления / исчезновения. Использует CSS и свойство CSS первой буквы.

Всплывающие подсказки без кода

Есть множество причин, по которым ваши нетехнические команды могут захотеть разработать, внедрить и повторить всплывающие подсказки — будь то маркетинг внутри вашего продукта или применение опыта работы с клиентами в ваших приложениях. .Но, возможно, лучшая причина в том, что вашим разработчикам просто нужно поджарить большую рыбу. Почему они должны быть жесткими всплывающими подсказками, когда они не нужны?

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

Всплывающих окон · Bootstrap

Документация и примеры для добавления всплывающих окон Bootstrap, подобных тем, которые есть в iOS, к любому элементу на вашем сайте.

Обзор

Что нужно знать при использовании плагина popover:

• Поповеры полагаются на стороннюю библиотеку Popper.js для позиционирования. Вы должны включить popper.min.js перед bootstrap.js или использовать bootstrap.bundle.min.js / bootstrap.bundle.js , который содержит Popper.js, чтобы всплывающие окна работали!
• Для всплывающих окон в качестве зависимости требуется плагин всплывающей подсказки.
• Если вы создаете наш JavaScript из исходного кода, для этого требуется util.js .

Всплывающие окна

• включены по соображениям производительности, поэтому вы должны инициализировать их самостоятельно .
• Пустая длина заголовка Значения и содержимого никогда не будут отображать всплывающее окно.
• Укажите контейнер : 'body' , чтобы избежать проблем с рендерингом в более сложных компонентах (например, в наших группах ввода, группах кнопок и т. Д.).
• Запуск всплывающих окон для скрытых элементов не работает.
• Всплывающие окна для .disabled или disabled элементы должны запускаться на элементе оболочки.
• При срабатывании якорей, которые переносятся по нескольким линиям, всплывающие окна будут располагаться по центру между общей шириной якорей. Используйте .text-nowrap на вашем s, чтобы избежать такого поведения.
• Всплывающие окна должны быть скрыты до того, как соответствующие им элементы будут удалены из DOM.

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

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

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

  $ (function () {
  $ ('[data-toggle = "popover"]').трещать()
})  

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

опция

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

  $ (function () {
  $ ('. example-popover'). popover ({
    контейнер: 'тело'
  })
})  

Пример

Нажмите, чтобы переключить всплывающее окно

   Нажмите, чтобы переключить всплывающее окно   

Четыре направления

Доступно четыре варианта: верхний, правый, нижний и левый.

Поповер сверху

Всплывающее окно справа

Поповер внизу

Поповер слева

  
  Поповер сверху



  Всплывающее окно справа



  Поповер внизу



  Поповер слева
  

Закрыть при следующем нажатии

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

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

Для правильного кроссбраузерного и кросс-платформенного поведения необходимо использовать тег , , а не , тег , а также необходимо включить атрибут tabindex .

   Раскрывающееся всплывающее окно   

  $ ('. Popover-dismiss'). Popover ({
  триггер: 'фокус'
})  

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

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

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

Для отключенных триггеров всплывающего окна вы также можете предпочесть data-trigger = "hover" , чтобы всплывающее окно отображалось как немедленная визуальная обратная связь для ваших пользователей, поскольку они могут не ожидать, что щелкнет на отключенном элементе.

Отключенная кнопка

Отключенная кнопка

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

Включить всплывающие окна через JavaScript:

  $ ('# пример').всплывающее окно (опции)  

Опции

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

Номер

Номер

Атрибуты данных для отдельных всплывающих окон

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

Методы

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

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

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

$ (). Всплывающее окно (опции)

Инициализирует всплывающие окна для коллекции элементов.

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

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

  $ ('# элемент'). Popover ('показать')  

.popover ('скрыть')

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

  $ ('# элемент').popover ('спрятать')  

.popover ('переключить')

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

  $ ('# элемент'). Popover ('переключение')  

.popover ('удалить')

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

  $ ('# элемент'). Popover ('dispose')  

.popover ('enable')

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

  $ ('# элемент'). Popover ('enable')  

.popover ('disable')

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

  $ ('# элемент'). Popover ('disable')  

.popover ('toggleEnabled')

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

  $ ('# элемент'). Popover ('toggleEnabled')  

.popover ('обновление')

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

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

События

Показано

  $ ('# myPopover'). On ('hidden.bs.popover', function () {
  // сделай что-нибудь…
})  

Получить параметр окна выбора пользовательского интерфейса JQ при каждом наведении указателя мыши - JSFiddle

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

Классический

Столбцы

Нижние результаты

Правильные результаты

Вкладки (столбцы)

Вкладки (строки)

Консоль

Консоль в редакторе (бета)

Очистить консоль при запуске

Общие

Номера строк

Обернуть линии

Отступ с табуляцией

Подсказка по коду (автозаполнение) (бета)

Размер отступа:

2 пробела 3 пробела 4 пробела

Ключевая карта:

По умолчанию: Sublime TextEMACS

Размер шрифта:

По умолчаниюBigBiggerJabba

Поведение

Код автозапуска

Только код автозапуска, который проверяет

Код автосохранения (натыкается на версию)

Автоматически закрывать HTML-теги

Автоматически закрывающие скобки

Проверка действующего кода

Выделите совпадающие теги

Заглушки

Показывать панель шаблонов реже

Плагин hoverFlow - решение для создания очереди анимации в jQuery

Или: Почему анимация наведения продолжается после того, как я его перестал?

При изучении jQuery.com, Брэндон Аарон опубликовал краткий совет о том, как предотвратить накопление очереди анимации при наведении курсора. Поскольку меня не удовлетворило его решение, я попытался найти другое.

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

Последним локальным шагом было преобразовать его в красивый плагин jQuery - так родился hoverFlow .

Скачать hoverFlow
2,25 КБ, уменьшено 1 КБ

API похож на собственный метод jQuery animate () - и использует то же определение параметров, продолжительности и опций анимации.

Однако метод hoverFlow () дополнительно требует, чтобы первым аргументом был тип события .

jQuery ('# selec.tor'). HoverFlow (eventType, params, [duration], [easing], [callback])

• eventType
one out of mouseover / -out / -enter / -leave
• params
хеш параметров анимации
• продолжительность
продолжительность анимации (необязательно)
• easing
easing effect (необязательно, требуется плагин)
• обратный вызов
функция, которая будет выполняться всякий раз, когда анимация завершится (необязательно)

jQuery ('# selec.tor '). hoverFlow (тип события, параметры, параметры)

• eventType
one out of mouseover / -out / -enter / -leave
• params
хеш параметров анимации
• опций
хеш опций анимации

Как всегда, метод jQuery должен вызываться, когда DOM готова.

Дополнительные примеры и примечания по использованию можно найти на странице демонстраций. Я также сделал несколько примеров использования hoverFlow с подменю.

hoverFlow протестирован в Firefox 2+, Internet Explorer 7+, Opera 9.6, Chrome 1. Я видел, как он работает (медленно) в IE6, но кого это волнует ...

Для подключаемого модуля требуется jQuery 1.2.3 или выше (поскольку он использует функции data () ).

hoverFlow имеет двойную лицензию по лицензиям GPL и MIT. Не стесняйтесь изменять исходный код в соответствии с вашими потребностями.

У вас есть предложения, найденные ошибки или исправления? Напишите мне.