Css при наведении: CSS: Hover — эффекты при наведении

Поведение курсора при наведении на текст — CSS-LIVE

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

Точнее говоря, технически спецификация не требует, чтобы курсор «по умолчанию» был по умолчанию. На самом деле, первоначальное значение свойства курсора — «auto», про это значение в спецификации сказано следующее: «Браузер сам определяет, определяет, какой курсор отображать, в зависимости от текущего контекста».

При определении значения «text» для свойства cursor спецификация поясняет: «Указывает текст, который может быть выделен. Чаще всего отображается, как l-образный текстовый курсор.»

Но, как вы наверное знаете, это может быть переопределёно в CSS, поэтому вы можете отображать курсор, какой захотите и в любое время. Заметьте, например, на сайте SitePoint с помощью CSS переопределено поведение курсора, который находится над обычным текстом.

На данный момент я не могу припомнить другой сайт, где встречается курсор, который при наведении на текст не меняет своего поведения. Единственное, я помню, что когда на «A List Apart» был редизайн сайта, они изначально сделали точно так же, как сейчас мы наблюдаем на SitePoint, т.е. ипользовали курсов в виде стрелки (по умолчанию), но через некоторое время вернули поведение курсора назад, изменив его на курсор по умолчанию для текстов (в виде палочки)

Какое поведение правильное?

Если вы обратитесь к спецификации, то увидите, что «текстовый» курсор (вертикальный I-образный текстовый курсор) является правильным. И, если вы захотите узнать, к какому курсору привыкли люди, то вы получите точно такой же ответ, как и в спецификации — «текстовый» курсор.

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

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

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

Это получилось не потому что этот текст находится в адресной строке, а потому что это редактируемый текст

Заметьте, что на странице настроек в браузере Chrome (которая является простой веб-страницей, внутри которой вы можете проинспектировать элемент и посмотреть код) переопределено дефолтное поведение при помощи значения «default» свойства cursor, когда курсор находится над текстом.

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

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

Дополнение: Как было отмечено в комментариях, многие заметили, что родные приложения используют I-образный текстовый курсор не только для редактируемого, но также и для любого выделяемого текста. Это имеет место в большинстве случаев. Лично я думаю, что I-образный текстовый курсор больше подходит в качестве индикатора «вставки текста» или «редактирования этого текста», чем индикатор выбора. И так же я считаю, что есть «родные» приложения, включающие выделяемый текст, в которых курсор является простой дефолтной стрекой-указателем. Но это не очень частая вещь, так что я в какой-то мере снимаю свои аргументы насчет обычных приложений, если рассматривать I-образный курсор как универсальный индикатор для выделяемого и редактируемого текста.

Заключение

Я не знаю исторической причины, по которой браузеры используют «текстовый» курсор на нередактируемом тексте. Некоторые сайты, такие как SitePoint, признали, что в этом отношении, может быть, было бы лучше следовать общим правилам.

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

Что вы думаете? Браузеры всё время ошибались? Я не думаю, что мы сможем здесь повлиять на что-либо, но я полагаю, что если мы дождемся момента, когда используемые браузеры будут автообновляться, производители могли бы договориться использовать более интуитивное родное поведение в этом отношении.

Охх, и приношу извинения за все анимированные курсоры. Уверен, они ни у кого не вызвали раздражения 🙂

Оригинал статьи и автор

P.S. Это тоже может быть интересно:

Набор эффектов при наведении CSS — изображения при наведении CSS

Прошлый месяц был связан с уроками о возможностях CSS3.

Посмотреть примерСкачать

Все статьи, которые связи с эффектами при наведении CSS на моём сайте, которые я писал раньше:

• CSS3 библиотека — 40+ эффектов при наведении
• Потрясающие эффекты CSS3 при наведении
• Оригинальный эффект CSS3 при наведении на…

Установка по шагам

К примеру мне понравился первый вариант из первого набора.

Ваш заголовок

Ваш заголовок

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

Шаг 1 — HTML при наведении

Сейчас нужно открыть файл index.html (если вам понравился эффект из первого набор) или index2.html (если из второго) и найти в HTML коде тег <h3>Вариант НОМЕР</h3>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<div>
    <figure>
        <img src="img/12. jpg" alt="img12"/>
        <figcaption>
            <div>
                <h3>Ваш <span>заголовок</span></h3>
                <p>Подробное описание</p>
            </div>
            <a href="#">Подробнее</a>
        </figcaption>			
    </figure>
    <figure>
        <img src="img/1.jpg" alt="img1"/>
        <figcaption>
            <div>
                <h3>Ваш <span>заголовок</span></h3>
                <p>Подробное описание</p>
            </div>
            <a href="#">Подробнее</a>
        </figcaption>			
    </figure>
</div>

Сейчас у нас есть структура. Осталось подключить необходимые стили.

Шаг 2 — CSS

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

Между тегами <head></head>

1

<link href="css/set1.css" rel="stylesheet" type="text/css" />

Но это еще не всё! Так как в нескольких примерах есть иконки, а я думаю и они вам также понравятся. Чтобы появились иконки, вам необходимо скопировать папку font-awesome-4.2.0 в папку fonts вашей темы. А затем подключить между тегами <head></head>:

1

<link href="fonts/font-awesome-4.2.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />

Это самая простая установка, что только может быть. Уверен — вы справитесь!

Вывод

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

Успехов!

Источник: Оригинал

С Уважением, Юрий Немец

Простой способ создания эффектов наведения CSS

Содержание

• 1. Определен селектор CSS :hover
• 2. Синтаксис :hover в CSS
• 3. CSS :hover и другие псевдоклассы
• 4. Еще сложный пример :hover
• 5. Поддержка браузера

Селектор CSS :hover определен

Селектор :hover в CSS на самом деле является псевдоклассом. Используя :hover , вы можете определить стиль конкретного элемента, когда пользователь наводит курсор на него, фактически не нажимая на него:

Пример

 h2:hover {
    цвет фона: синий;
} 

Попробуйте вживую. Узнайте на Udacity

Синтаксис :hover в CSS

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

• с помощью имя
  элемента
• с использованием ID элемента
• с использованием определенного класса

Пример

 p:hover, h2:hover, a:hover {
    цвет фона: желтый;
} 

Попробуйте на Udacity

Pros

• Упрощенный дизайн (без лишней информации)
• Качественные курсы (даже бесплатные)
• Разнообразие функций

Основные функции

• Программы NanodeGree
• Подходящие для предприятий
• Платные сертификаты о завершении

Эксклюзив: 75% скидка

Pros

. Легкий

. заботиться о своих пользователях

Основные характеристики

• Большое разнообразие курсов
• 30-дневная политика возврата средств
• Бесплатные сертификаты об окончании

до 12,99 долл. США

Pros

• Great User Experience
• предлагает качественное содержание
• Очень прозрачные с их ценами

Основные функции

СКИДКА 75%

CSS :hover и другие псевдоклассы

Довольно часто в CSS для стилизации ссылок используются эффекты наведения:

Пример

 a.link1:hover,
a.link1: активный {
цвет: зеленый;
}
a.link2: наведите курсор,
a. link2: активный {
размер шрифта: 120%;
} 

Попробуйте живое обучение на Udacity

Для этого вы можете использовать :hover с другими псевдоклассами. Селектор :link предназначен для непосещенных ссылок, :visited используется для посещенных страниц, а :active используется для активной ссылки.

Чтобы правильно оформить ссылки, вы должны помнить, что псевдоклассы :link , :visited , :hover и :active должны использоваться именно в таком порядке : 24 Пример

 /* непосещенная ссылка */
ссылка {
    цвет: зеленый;
}

/* посещенная ссылка */
а: посетил {
    цвет: зеленый;
}

/* наведите курсор на ссылку */
а: наведите {
    красный цвет;
}

/* выбранная ссылка */
а: активный {
    цвет: желтый;
} 

Попробуйте Live Learn на Udacity

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

Пример

 a {
 дисплей: нет;
}
span:hover + a { /* Ссылка отображается только тогда, когда вы наводите курсор на элемент span */
 дисплей: блок;
} 

Попробуйте вживую. Учитесь на Udacity

Более сложный пример :hover

Чтобы лучше понять, что такое CSS hover 9Доступны эффекты 0021, см. чуть более сложный пример ниже. При наведении курсора на элемент появится раскрывающееся меню . Затем, когда вы наведете курсор на его параметры, они будут выделены :

Пример

 div {background-color: blue;}
дел а {
 текстовое оформление: нет;
 цвет белый;
 размер шрифта: 20px;
 отступ: 15 пикселей;
 отображение: встроенный блок;
}
ул {
 дисплей: встроенный;
}
уль ли {
 отображение: встроенный блок;
}
уль ли:наведите {
 фон: синий;
}
ул ли: наведите ул {
 дисплей: блок;
}
уль ли уль {
 положение: абсолютное;
 ширина: 150 пикселей;
 дисплей: нет;
}
уль ли уль ли {
 дисплей: блок;
 фон: синий;
}
уль ли уль ли а {
 отображение: блок !важно;
}
уль ли уль ли: наведите курсор {
 фон: голубой;
} 

Попробуйте вживую. Учитесь на Udacity

Примечание. использование селектора CSS :hover может вызвать проблемы у пользователей сенсорных экранов, поскольку прикосновение к элементу обычно интерпретируется как щелчок.

Browser support

Chrome

1+

Edge

12+

Firefox

1+

IE

4+

Opera

4+

Safari

2+

Поддержка мобильных браузеров

Chrome

18+

Firefox

4+

Opera

-

Safari