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

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

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

Я внезапно вспомнил, что 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:

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

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

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

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

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

Markup

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

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

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

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

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



  
 
  

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

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

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