| | | | | |

Hover html css эффект при наведении

2018/03/29 Марат 2390 0 CSS | URL |

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

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

Я всегда называл "hover" - свойством, и посудите сами, что способность изменяться объектам – самое правильное название свойство, но на самом деле "hover" - это псевдокласс.

Видео на тему: Hover html css эффект при наведении

Что такое hover ?

С самого начала нужно дать определение. Что такое hover !? Hover - как я и написало ранее – способность изменять свои свойства при наведении мышки.

1. Ну и уж раз нас сподвигло написать данную страницу именно "hover" для ссылки и давайте седлаем какой-то совсем простой пример для понимания, как работает a:hover.

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

И далее сделаем простую ссылку, которая у нас по умолчанию – вот она . И вот так она выглядит в коде:
<a href="">вот она </a>

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

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

И далее создадим ссылку и вставим туда класс.

<a href="" class="first">Изменение цвета ссылки при наведении hover</a> Далее для нового класса нам нужно сделать hover. Для того, чтобы применить "hover" – вам потребуется файл css и там мы должны написать такую конструкцию:

a.first:hover{

color: red;

}

Ну и далее -собственно наша новая ссылка с новым поведением hover.

Изменение цвета ссылки при наведении hover

Вывод о реализации и использовании hover

Для того, чтобы использовать псевдокласс hover, вам нужно к какому-то обьекту, классу, тегу прикрепить этот hover, для ссылки это будет a:hover, для какого то класса, который мы использовали выше это класс first и в нем же ссылка. То логика такая сначала пишем ссылку "a", далее класс ".first", и далее к ним двоим наш " :hover" итого у нас должно получиться так:
a.first:hover

Ну и далее остается, вам присвоить данной конструкции какое-то свойство - например цвет...

2. Ну и второй пример -давайте, изменим, ну например свойство hover для картинки - добавим бордюр - это, самое первое, что пришло в голову.

нам нужна какая-то картинка -вообще не важно какая это будет картинка, например вот эта - обозначающая нашу тему cssНаведите на картинку мышку и.. и ничего не происходит! и ничего и не будет происходить, потому. что ничего у нас и не прописано