Использование Hover css эффект при наведении примеры

"Hover" - это один из способов изменить свойства элемента при наведении мышки! Можно "hover" применить для картинки, блока и в общем для всего, что имеет физическую оболочку – имеется ввиду тег.

Если у вас есть код какого-то объекта, то его на 99% можно обернуть в псевдокласс :hover. Примеры использования :hover.

Подробно об использовании :hover в css html.

1. Что такое hover?
ВИДЕО : Hover эффект при наведении

2. Изменение цвета с помощью "hover"
3. Hover внутри тега
4. Использовать opacity в hover в css
5. Как задать время появления hover

Что такое hover?

Начнем, как обычно в таких случаях с определения : "что такое hover"!?

"hover" - это псевдокласс, который изменяет стиль элемента на котором остановился курсор мыши.

Как записывается и используется псевдокласс "hover"!?

Для того, чтобы быстро разобраться в выше приведенном определении, нам потребуется пример использования псевдокласса "hover"

Как вы знаете, что существует "3 способа css" использование - для псевдокласса - доступно только 2.(но об этом позже!)

Просто пример использования "hover":

В данном примере применен псевдокласс "hover" для изменения цвета при наведении на элемент Dom-а ... подробнее здесь.

example:hover

Еще больше о "hover" здесь.

{видео}




Изменение цвета с помощью "hover"

Выше уже был показан пример по изменению цвета элемента с помощью "hover" - давайте его здесь повторим, а потом разберем, как это работает!

Для того, чтобы увидеть изменение цвета при наведении мышки - наведите её на элемент ниже:

example:hover

Не будем разбирать на странице поведение бордюра он здесь.

Как в этом примере работает hover!?

Для того, чтобы создать данный пример нам потребуется:

В данном случае использовался тег ссылки "a":

<a href=url_ссылки >example:hover</a>

Во внутрь элемента помещаем что-то, что будет его отличать от других элементов на странице, например класс и добавляем ему "hover". В фигурных скобках прописываем свойство, которые будет менять при наведении - мы выбрали цвет.

.example:hover
{
  color:red;
}


Далее нам понадобится css - будем его использовать прямо здесь на странице, поэтому нам нужен style и в него помещаем выше приведенный эффект изменения

<style>style</style>

Соберем весь пример использования "hover"

Css:

<style>

.example:hover

{

  color:red;

}

</style>

Html:

<a href="ссылка" class="example">example:hover</a>

Результат использования "hover"

Что проверить работу стилей при наведении мышки наведите по тексту

example:hover



"Hover" внутри тега

Выше говорил, что существует "3 способа css"... выше использовали 1). пример "hover" в style на странице. 2). Использование в файле css аналогично, там ничего интересного ент.

А вот третий способ использования "hover"

Для "hover" - это недоступно, просто потому, что это не работает и всё!

Потому... что даже записать не сможете, здесь будет синтаксическая ошибка, ну например:

<a href=url_ссылки style="example:hover{color:red;}" class="example">тексти</a>

Но, что делать, если нам хочется использовать "hover" внутри тега.

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

Пример "hover" внутри тега:

Давайте посмотрим сначала на пример - наведите мышку на элемент ниже:

ЛЮБОЙ ТЕКСТ

Как работает пример использования "hover" внутри тега!?

Создадим какой-то div со стилями! Наведите мышку на этот див...

<div style="background: #333; padding: 10px; cursor: pointer; border: 1px solid;"> ЛЮБОЙ ТЕКСТ </div>
ЛЮБОЙ ТЕКСТ

Как видим - никакого эффекта при наведении нет!

Теперь добавим появление мышки над объектом(onmouseover) и после этого будем отправлять в тег свойство стилей background:

onmouseover="this.style.backgroundColor='#FFF';"

Но если мы убираем мышку, то свойства остаются!

ЛЮБОЙ ТЕКСТ

А нам надо чтобы свойства возвращались при покидании мышкой - в общем эмуляция псевдо класса Hover - нам надо добавить еще одно поведении мышки - покидание мышки(onmouseout) с объекта:

onmouseout="this.style.backgroundColor='#333';

Теперь соединим весь код "hover" внутри тега вместе:

<div style="background: #333; padding: 10px; cursor: pointer; border: 1px solid;" onmouseover="this.style.backgroundColor='#FFF';" onmouseout="this.style.backgroundColor='#333';"> ЛЮБОЙ ТЕКСТ </div>

Вот мы заставили hover работать и в теге!

ЛЮБОЙ ТЕКСТ



Использовать opacity в hover в css

Решил добавить пример использования hover в связке с opacity , все довольно просто! Мы можем просто понизить opacity в hover до 0.5

.example_opacity:hover

{

opacity: 0.5;

}

<span class="example_opacity">Делаем opacity 0.5 в hover</span>

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

Результат установки opacity в hover

Делаем opacity 0.5 в hover

Если сделать наоборот!?

Предположим, что нам требуется убрать opacity в hover. Изначально устанавливаем opacity 0.5, а в hover opacity =1

.example_opacity2

{

opacity: 0.5;

}

.example_opacity2:hover

{

opacity: 1;

}

<span class="example_opacity2">Убираем эффект opacity в hover</span>

Результат:

Убираем эффект opacity в hover



Как задать время появления hover

Я как-то делал страницу о плавном появлении подчеркивания ссылки.

Существует, вообще, несколько способов задать время появления hover.

Свойство transition

Свойство animation

@keyframes

Вы все это можете изучить самостоятельно, либо вот здесь рассматривали transition


В качестве примера задержка появления hover 0.3 секунды:

Пример плавного подчеркивание ссылки