При наведении курсора css: Эффекты при наведении курсора

Разное 

13. Псевдоклассы и контекстные селекторы · Неожиданный HTML

Поскольку объекты страницы могут принимать разные состояния, нам нужны конструкции, которые бы позволяли с этими состояниями работать

:hover – псевдокласс, который срабатывает в тот момент, когда над объектом находится курсор. Например если написать в css-файле

.block{
    background:blue;
    width:100px;
    height:100px;
}
.block:hover {
    background:red;
}

То данный код будет окрашивать div’ы с классом block в красный цвет при наведении на них курсора.

:visited – определяет цвет гиперссылки после того как она была «посещена», то по ней произошел переход на сайт. Задание: сделать, чтобы гиперссылки по умолчанию не подчеркивались, а при наведении на них курсора подчеркивание возникало. Посещенные ссылки должны окрашиваться в красный цвет.

:active – срабатывает при клике на объект. Правда active работает только до тех пор, пока мы держим клавишу зажатой.

:focus – срабатывает, когда у элемента с фокусом, например, когда в input’e есть мигающий курсор ввода

<input type="text">

input:focus {
     border:10px solid purple;
}

Контекстные селекторы

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

.cart {
    width:400px;
    height:200px;
    background-color:grey;
}
.product {
    width:100px;
    height:100px;
    background-color:cornflowerblue;
}

Но если товар попал в корзину, то должна появится корзина

.cart  .product {  
    border:20px solid black;
}

Контекстные селекторы и псевдоклассы

Можно группировать контекстные селекторы с псевдоклассами.

.big:hover .small {
    background:red;
}

Данное оформление означает, что к элементу .small , который находится внутри . big , на который навели курсор.

Неочевидные моменты

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

Рассмотри следующий css-файл

.parent .block {
    background-color:orange;
}
.block {
    width:100px;
    height:100px;
    background-color:violet;
}

соответствующий ему html

<div>
   <div>
   </div>
</div>

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

Примеры

  1. Различные hover-эффекты при наведении на кнопку http://codepen.io/fox_hover/pen/bqZxLa

  2. Кнопки с градиентами, которые меняют их при наведении http://codepen.io/pirrera/pen/bqVe

  3. Библиотека различных hover-эффектов
    http://ianlunn.github.io/Hover/

Практика:

  1. Нужно сделать, чтобы гиперссылка по умолчанию была без подчеркивания, но при наведении начинала подчеркиваться
  2. Изменение цвета div’a при наведении
  3. Картинка закрыта градиентом. При наведении градиент пропадает.
  4. Задаем разные цвета блоков-детей у разных блоков-родителей с помощью контекстных селекторов
  5. Строим спрайт. При наведении меняем картинку на ее черно-белую копию

  6. При наведении на блок, вложенные блоки показываются

  7. Есть картинка на фоне блока. При наведении картинка приближается, блок не увеличивается.

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

Добавление и настройка действия при наведении указателя | Центр Поддержки

Оживите боксы, репитеры и элементы, добавив эффекты при наведении курсора. Это эффекты, которые посетители видят при наведении курсора на настроенные вами элементы.

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

Шаг 1 | Добавьте и настройте элемент

Эффекты при наведении курсора делают сайт более динамичным. Чтобы начать, добавьте бокс или репитер из панели Добавить.

Выберите вариант ниже и узнайте подробнее о каждом элементе.

Добавление бокса

  1. Нажмите значок Добавить в левой части редактора.
  2. Выберите Бокс.
  3. Нажмите или перетащите бокс, чтобы добавить его на страницу.
    Совет: нажмите Динамические и выберите бокс, если вы предпочитаете использовать готовый динамический бокс.
  4. (При желании) Настройте дизайн бокса и при необходимости добавьте элементы.

Добавление репитера

  1. Нажмите значок Добавить в левой части редактора.
  2. Нажмите Список.
  3. Нажмите Репитеры.
  4. Нажмите или перетащите репитер, чтобы добавить его на страницу.
  5. (При желании) Настройте дизайн репитера и при необходимости добавьте элементы.

Шаг 2 | Откройте режим «При наведении»

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

Как это сделать?

  1. Выберите бокс / репитер в редакторе.
  2. В зависимости от вашего элемента, сделайте следующее:
    • Бокс: нажмите на значок Эффекты при наведении .
    • Репитер: нажмите на любой контейнер в репитере и выберите значок Эффекты при наведении .
  3. Нажмите
    Начать    .

Шаг 3 | Добавьте эффекты при наведении курсора

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

Выберите, что вы хотите сделать:

Добавьте элементы, которые появляются при наведении курсора

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

Примечание: не все элементы можно добавить в режим наведения.

Скрыть элемент при наведении

Чтобы элемент исчезал при наведении курсора:

  1. Выберите элемент и нажмите Удалить на клавиатуре или нажмите значок
    Скрыть     .
    Примечание: вы можете скрыть определенные элементы или весь бокс / репитер.
  2. Нажмите значок Скрываются при наведении в левом верхнем углу, чтобы получить доступ к списку скрытых элементов и управлять им.

Выберите эффект для элемента при наведении курсора

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

Чтобы выбрать эффект:

  1. Выберите бокс / репитер в редакторе.
  2. Нажмите значок Выбрать анимацию.
  3. Выберите эффект из доступных вариантов.
    Совет: выберите эффект Комбо, чтобы объединить несколько эффектов. Например, вы можете заставить элемент одновременно увеличиваться и вращаться.
  4. (Необязательно) Нажмите Настроить, чтобы настроить эффект.

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

Чтобы установить время:

  1. Выберите элемент в редакторе.
  2. Нажмите на значок Время .
  3. Используйте доступные параметры, чтобы установить время отображения эффекта:
    • Длительность: перетащите ползунок, чтобы выбрать продолжительность эффекта (в секундах) после наведения курсора на элемент.
    • Задержка: перетащите ползунок, чтобы выбрать задержку (в секундах) с момента наведения курсора на элемент до момента, когда посетитель увидит эффект.
    • Замедление: выберите, как ваш элемент должен переходить из обычного состояния в состояние анимации при наведении курсора (например, начало и завершение эффекта).

Измените дизайн бокса при наведении курсора

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

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

Чтобы изменить дизайн бокса при наведении:

  1. Нажмите на бокс в редакторе, чтобы выбрать его.
  2. Перейдите во вкладку При наведении вверху окна.
  3. Нажмите значок Дизайн .
  4. Выберите соответствующую вкладку в левой части панели, чтобы отредактировать дизайн:
    • Цвет и прозрачность: перетащите ползунок, чтобы настроить прозрачность фона, и щелкните поле цвета, чтобы изменить цвет.
    • Граница: нажмите на поле цвета, чтобы изменить цвет, и перетащите ползунки, чтобы настроить прозрачность и ширину границы.
    • Уголки: выберите радиус, чтобы настроить скругление уголков. Нажмите значок ссылки, чтобы сделать все уголки одинаковыми.
    • Тень: нажмите на переключатель, чтобы включить тень, затем отредактируйте угол, расстояние, размер и другие параметры.

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

Была ли статья полезна?

|

Hover в CSS | Изучите различные примеры Hover в CSS

Динамические страницы требуют времени. Чем удобнее и конкретнее веб-страница, тем больше вероятность того, что конечные пользователи будут ее использовать или просматривать. Каскадная таблица стилей предлагает множество функций, когда речь идет о предоставлении динамических свойств веб-странице. Функция наведения — одна из них. Используя это свойство при стилизации любого элемента, мы можем убедиться, что получаем желаемый эффект при наведении указателя мыши на эту часть страницы. Он прост в использовании, но придает странице декоративный и анимированный вид, что всегда можно рассматривать как плюс. Давайте рассмотрим это свойство и его использование. В этой теме мы собираемся узнать о Hover в CSS.

Синтаксис и использование Hover в CSS

Для создания любого эффекта наведения в CSS мы создаем псевдокласс для этого элемента, описывая, какой эффект должен быть наведен на этот элемент. Синтаксис свойства hover:

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

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

Примеры Hover в CSS

Давайте посмотрим на некоторые примеры функции Hover в CSS.

Пример #1

Демонстрация чрезмерного эффекта для одного HTML-элемента с использованием внешнего CSS

  • В этом примере мы будем использовать внешний CSS, поэтому по ходу процесса мы сначала создадим страницу CSS.
  • На странице CSS мы сначала определим стиль для элемента абзаца

    . Далее мы создадим псевдокласс и определим эффект зависания для того же элемента.

  • Код CSS для этого примера должен выглядеть так, как показано ниже:
 р{
размер шрифта: 25px;
стиль шрифта: курсив;
текст-декор: двойной;
цвет фона: светло-розовый;
цвет: зеленый;
}
П: наведите {
цвет фона: желтый;
стиль шрифта: обычный;
черный цвет;
}
  • Далее мы создадим HTML-страницу. Здесь, в разделе заголовка, мы сначала вызовем внешнюю таблицу стилей. Затем в разделе body мы будем использовать элемент абзаца

    , чтобы продемонстрировать эффект наведения.

  • Код HTML для страницы может быть похож на приведенный ниже фрагмент кода:
 
<голова>
Наведение в CSS


<тело>
 
Демонстрация функции Hover в CSS
 

Эффект этого текста изменится при наведении на него курсора!
  • Теперь, когда вы откроете эту страницу, она будет выглядеть так:

  • И как только вы наведете курсор на розовую область, она изменится следующим образом:

Пример #2

Демонстрация эффекта чрезмерного воздействия на несколько элементов HTML с использованием внешнего CSS

  • Как и в предыдущем примере, сначала мы создадим внешнюю таблицу стилей.
  • Мы определим стили для нескольких элементов, а также псевдоклассы для определения поведения каждого элемента при наведении.
  • Код CSS должен выглядеть примерно так, как показано ниже:
 р{
размер шрифта: 25px;
стиль шрифта: курсив;
текст-декор: двойной;
цвет фона: светло-розовый;
цвет: зеленый;
}
П: наведите {
цвет фона: желтый;
стиль шрифта: обычный;
черный цвет;
}
а {
красный цвет;
стиль шрифта: курсив;
размер шрифта: 30px;
вес шрифта: 14px;
кайма: светло-розовая пунктирная;
}
а: наведите {
цвет синий;
стиль шрифта: обычный;
вес шрифта: не установлен;
}
h3{
цвет: фиолетовый;
цвет фона: светло-зеленый;
вес шрифта: 16px;
}
h3: наведите {
цвет: бледно-фиолетовый;
цвет фона: белый;
}
  • Далее мы напишем код для страницы HTML, где раздел заголовка будет вызывать используемую внешнюю таблицу стилей.
  • В разделе body мы будем использовать все три элемента, которые мы стилизовали на странице CSS.
  • Код HTML должен быть похож на приведенный ниже код:
 
<голова>
Наведение в CSS
 css">

<тело>
 
Демонстрация функции Hover в CSS
 

Эффект этого текста изменится при наведении на него курсора!

Ссылка на Google
  • Вывод должен выглядеть примерно так, как показано на следующем снимке экрана:

  • Наведение курсора на каждый из них даст следующие результаты:

Пример #3

Демонстрация функции наведения с использованием внутреннего CSS

  • Поскольку в этом примере мы используем внутренний CSS, мы будем напрямую кодировать стиль в разделе заголовка HTML-страницы.
  • Раздел заголовка страницы HTML должен быть следующим:
 <голова>
Наведение в CSS
<стиль>
п{
размер шрифта: 25px;
стиль шрифта: курсив;
текст-декор: двойной;
цвет фона: светло-розовый;
цвет: зеленый;
}
П: наведите {
цвет фона: желтый;
стиль шрифта: обычный;
черный цвет;
}
а {
красный цвет;
стиль шрифта: курсив;
размер шрифта: 30px;
вес шрифта: 14px;
кайма: светло-розовая пунктирная;
}
а: наведите {
цвет синий;
стиль шрифта: обычный;
вес шрифта: не установлен;
}
h3{
цвет: фиолетовый;
цвет фона: светло-зеленый;
вес шрифта: 16px;
}
h3: наведите {
цвет: бледно-фиолетовый;
цвет фона: белый;
}

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

  • Код HTML должен быть похож на приведенный ниже фрагмент:
 
<голова>
Наведение в CSS
<стиль>
п{
размер шрифта: 25px;
стиль шрифта: курсив;
текст-декор: двойной;
цвет фона: светло-розовый;
цвет: зеленый;
}
П: наведите {
цвет фона: желтый;
стиль шрифта: обычный;
черный цвет;
}
а {
красный цвет;
стиль шрифта: курсив;
размер шрифта: 30px;
вес шрифта: 14px;
кайма: светло-розовая пунктирная;
}
а: наведите {
цвет синий;
стиль шрифта: обычный;
вес шрифта: не установлен;
}
h3{
цвет: фиолетовый;
цвет фона: светло-зеленый;
вес шрифта: 16px;
}
h3: наведите {
цвет: бледно-фиолетовый;
цвет фона: белый;
}


<тело>
 
Демонстрация функции Hover в CSS
 

Эффект этого текста изменится при наведении на него курсора!

Ссылка на Google
  • Сохранение этой страницы и открытие ее в браузере приведет к следующему выводу:

  • Наведение курсора на каждый из них даст следующие результаты:

  • В приведенных выше примерах показано, как свойство Hover можно использовать в CSS. Можно поэкспериментировать с различными функциями для псевдокласса зависания и дизайна в соответствии с проектной схемой.

Рекомендуемые артикулы

Это руководство по Hover в CSS. Здесь мы обсудим некоторые примеры функции наведения в CSS, а также синтаксис и использование. Вы также можете ознакомиться со следующими статьями, чтобы узнать больше:

  1. CSS Validator
  2. Видимость в CSS
  3. Генератор границ CSS
  4. Оформление текста CSS

A: проблема с наведением — HTML и CSS — Форумы SitePoint

Форумы SitePoint | Сообщество веб-разработки и дизайна

ким

#1

Привет

Я потратил часы на это, это должно быть очень, очень просто, и мне стыдно обращаться за помощью по этому поводу…

Я сделал цвет при наведении на боковой панели белым, но перепробовав все возможности Я не понимаю, почему это не работает для двух нижних изображений

http://pintotours. net/TEMP/FRONT/Front.html

 >

Более непосредственный css ниже, и я посмотрел на содержащие div #main и #wrapper и не могу понять, что его останавливает

 .mgn1 p{
выравнивание текста: по центру;
белый цвет;
размер шрифта: 20 пикселей;
заполнение сверху: 10px;
нижний отступ: 20px;
маржа сверху: 0;
 пробел: nowrap;
}
.mgn1 a:наведите{
цвет:золото !важно;
}
.box1 изображение {
дисплей:блок;
высота:авто;
максимальная высота: 250 пикселей;
ширина:80%;
маржа: 10% авто;
}

1 Нравится

Миттиниг

#2

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

зим

#3

Привет

Моя голова перестала работать…

Это код, и я думаю, что тег a там.

 .mgn1{
дисплей: встроенный блок;
ширина:45%;
максимальная ширина: 350 пикселей;
поле: 0 15 пикселей;
высота: 50 пикселей;
граница: 1px сплошной серый;
цвет фона:#008B8B;
}
.mgn1 п{
выравнивание текста: по центру;
белый цвет;
размер шрифта: 20 пикселей;
заполнение сверху: 10px;
нижний отступ: 20px;
маржа сверху: 0;
 пробел: nowrap;
}
.mgn1 а{
белый цвет;
}
.mgn1 a:наведите{
цвет:золото !важно;
}

Не могли бы вы уточнить, пожалуйста?

Пожалуйста…

РЕДАКТИРОВАТЬ

Возможно, я добавил его недавно, когда вы видели таблицу стилей. Но все равно не работает

Миттиниг

#4

зим:

Не могли бы вы уточнить, пожалуйста?

Я говорил не о вашем CSS, а о вашем HTML

qim

#5

Это мой html. ссылки находятся внутри тегов. По крайней мере я так думал

 
АРЕНДА АВТОМОБИЛЯ
 

ТУРИСТИЧЕСКОЕ СТРАХОВАНИЕ

Что мне делать, пожалуйста?

Вы имеете в виду, что я должен ориентироваться на тег p? п: зависнуть? Я никогда не слышал об этом!

Не верю! Оно работает!

Большое спасибо

Миттиниг

#6

зим:

Что мне делать?

Вы имеете в виду, что я должен ориентироваться на тег p?

Зависит от того, что вы хотите сделать.

Но вам нужно либо изменить CSS, чтобы он соответствовал HTML, либо изменить HTML, чтобы он соответствовал CSS

Лично я, хотя я думаю, что HTML5 позволяет это, мне кажется неправильным иметь элементы блочного уровня внутри встроенного

РЕДАКТИРОВАТЬ

число:

Работает!

Отлично!

зим

#7

Привет

Мы пересекли сообщения.

Работает! Я узнал кое-что новое.

Большое спасибо

РайанРиз

#8

Миттиниг:

Лично я, хотя я думаю, что HTML5 это позволяет, мне кажется неправильным иметь элементы блочного уровня внутри встроенного

HTML5 позволяет ANCHORS быть родителем блочных элементов. IIRC, это единственный.

фелгалл

#9

РайанРиз:

HTML5 позволяет ANCHORS быть родителем блочных элементов.

Да, но это не работает, когда CSS предполагает, что якорь находится внутри блочного элемента — вы должны определить его одинаково в обоих местах.

зим

#10

Привет

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

фелгалл:

анкер находится внутри блочного элемента

Извините, что спустя 3 года я все еще не понимаю язык css/html. Я так понимаю, якорь — это тег, а блочный элемент — это mgn div. Так ли это?

Но поскольку тег a находится на концах строки, а mgn div внутри них, я не понимаю, о чем вы говорите. Не могли бы вы объяснить, пожалуйста?

см. здесь http://pintotours.net/TEMP/FRONT/box1.html

 .row {
выравнивание текста: по центру;
}
.mgn{
дисплей: встроенный блок;
ширина:45%;
максимальная ширина: 350 пикселей;
поле: 0 15 пикселей;
высота: 50 пикселей;
граница: 1px сплошной серый;
цвет фона:#008B8B;
}
. мгн п{
выравнивание текста: по центру;
вес шрифта: полужирный;
белый цвет;
размер шрифта: 20 пикселей;
заполнение сверху: 10px;
нижний отступ: 20px;
маржа сверху: 0;
 пробел: nowrap;
}
.mgn p:наведите{
цвет:#ffd700;
}
<дел>









ПО ВСЕМУ МИРУ
 

КАРИБСКИЙ БАССЕЙН


FLY EMIRATES

Матеус

#11

Это работает, и HTML5 должен разрешать блочные элементы, обернутые тегами привязки (встроенный элемент). @felgall, можете ли вы привести пример, когда это может потерпеть неудачу? Я избегаю использовать этот способ, но я никогда не видел, чтобы он сломался в HTML5 — только в HTML4.01.

@qim, чтобы было понятно. Я бы сделал так: