☰
Всех друзей поздравляем с Новым годом! Всего вам самого наилучшего! Всех благ, здоровья а материальное приложится! СКРИПТЫ althtmlcssphpjsЕЩЁ

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

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

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

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

Навигация по странице :
  1. ВИДЕО : Hover эффект при наведении
  2. Что такое hover?
  3. Как обозначается свойство меняющее цвет при наведении!?
  4. Как прописать hover в файле css, на странице, в теге
  5. Изменение цвета с помощью "hover"
  6. Появление руки при наведении пример
  7. Hover внутри тега
  8. Использовать opacity в hover в css

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


    Что такое hover?

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

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


    Как обозначается свойство меняющее цвет ссылки при наведении!?

    4. Свойство, которое свойством не является - называется псевдокласс, которое меняет цвет при наведении мышки на ссылку, обозначается в стилях таким образом:

    a:hover{

    color: red;

    }

    Где буква а, перед которой нет никаких знаков, ссы воспринимает как тег ссылки. После буквы а идет : - двоеточие, которое и обозначает, что дальше идет псевдокласс, после него идет название псевдокласса a:hover, далее открываются фигурные скобки и внутри прописываются свойства для этого тега ссылки


    Как прописать hover в файле css, на странице, в теге

    5. Нам нужно разобраться, как задавать свойство, которое меняет цвет при наведении! Поскольку ссылка у нас по умолчанию забита стиями, то возиться ней муторно, поэтому возьмем для римера любой тег! Вообще любой, например span! И будем с ним работать!
    Прежде нужно сказать пару вводных...
    Как вы знаете, что свойства css можно прописывать тремя способами! 1). В файле css, 2). на странице в стилях, 3).в самом теге .

    Начнем с файла css.


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

    6. 1). Для данного примера нам потребуется наш объявлений тег ранее без стилей! Сейчас на этом теге ничего не сработает!

    <span>Тег span без ничего</span>

    Результат:

    Тег span без ничего
    Добавляем к нашему тегу класс -> class="example"
    <span class="example">Тег span с классом и example:hover</span>

    Теперь в файле css напишем стили для этого класса, пусть hover меняет цвет при наведении на красный:

    .example:hover

    {

    color:red;

    }

    Результат:

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

    Тег span с классом и example:hover


    Появление руки при наведении пример

    7. 2). Второй вариант, это прописать стили на самой странице, обычно их прописывают между тегами <head></head>, откройте код страницы ctrl + U и далее нажмите ctrl + F и введите скопированное отсюда слово head... и вы увидите расположение данного тега.

    Но сейчас можно прописывать стили вообще в любом месте страницы!

    Там они прописываются в соответствующем теге

    <style></style>

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

    <span class="example example_2">Тот же тег span, но и добавим еще один класс example_2</span>

    Менять цвет второй раз скучно, давайте теперь к нашему тегу прибавим например руку, при наведении будет показываться рука.

    За это у нас отвечает свойство -> cursor: pointer;. Берем теги стилей и помещаем куда-нибудь на страницу:

    <style>

    .example_2

    {

    cursor: pointer;

    }

    </style>

    Результат:

    Здесь приведен пример появления руки при наведении, но и осталось изменение цвета при наведении!

    Тот же тег span, но и добавим еще один класс example_2


    Hover внутри тега

    8. 3). Третий вариант использования hover - использование его в самом теге!
    Здесь нужно сказать, что это невозможно , потому, что hover не свойство, а псевдо класс, и в теге размещение его невозможно!
    НО!

    Есть другая возможность поставить эффект при наведении прямо в тег - это добавление js во внутрь тега:

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

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

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

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

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

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

    ЛЮБОЙ ТЕКСТ

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

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

    Теперь соединим весь код вместе:

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

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

    ЛЮБОЙ ТЕКСТ

    9. Использовать 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

Вас может еще заинтересовать список тем : CSS , URL ,
Последняя дата редактирования : 2020-01-18 12:51
Теги:
hover htmlhover html csshover style htmlhover color htmlbutton hover htmlкак прописать hover в htmlhover csshover эффекты csscss hover эффект при наведенииhover text csscss hover colorсвойство hover cssкак отключить hover cssa hover css примерыhover для текста cssкак прописывать hover csshover команда css как использоватьпрописать ховер в htmlkak ispolzovat opacity v hover v cssиспользовать opacity в hover в css

НАШИ ПРОЕКТЫ : Проекты находятся в разной степени готовности (просто их столько, что времени не хватает…) Все статьи авторские, при копироавании активная ссылка обязательна DwWeb.ru! © 2015 - 2020