Кнопка меняет цвет при наведении css: javascript — При наведении курсора фон кнопки и текст должны изменяться снизу вверх

Разное 

Анимации CSS / Девман

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

1. Как оживить кнопку

Очень советуем не просто читать туториал, а выполнять его вместе с нами, шаг за шагом. Так материал быстрее усвоится и повторить его будет проще.

1.1. Запустите стартовый шаблон

Для начала возьмите наш стартовый шаблон с кнопкой красного цвета, сохраните к себе в файл и откройте в браузере:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style type="text/css">
      .animated-btn {
        background-color: red;
      }
    </style>
  </head>
  <body>
    <button>Кнопка</button>
  </body>
</html>

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

1.2. Добавьте класс с новым стилем

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

Сейчас создайте второе CSS-правило для той же кнопки. Поместите новое правило ниже первого.

.animated-btn {
  background-color: red;
}
.animated-btn {
  background-color: blue;
}

Откройте Инструменты разработчика браузера, и вы увидите, что оба правила сработали. Оба правила меняют стиль

background-color и поэтому второе перекрыло первое:

Кнопка стала синего цвета. Теперь научите её реагировать на движение мыши.

1.3. Добавьте :hover

Теперь дело за малым: добавьте новому селектору ключевое слово :hover. Да, вот так просто:

.animated-btn {
  background-color: red;
}
.animated-btn:hover {
  background-color: blue;
}

Теперь кнопка меняет цвет при наведении:

Ключевое слово :hover называют псевдоклассом. Подобно классу его можно использовать в селекторе.

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

Правило .animated-btn:hover говорит браузеру: Ищу тег с классом animated-btn, и чтобы на него смотрел указатель мыши. Когда мышь наведена на кнопку, то правило срабатывает. Как только мышь перемещается на другой тег — перестаёт.

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

Есть ещё одна особенность у :hover. Псевдокласс получает не только один тег, но все его родители. В примере с кнопкой это будут сразу два тега <button> и <body>

:

...
<body>
    <button>Кнопка</button>
...

1.4. Добавьте больше стилей

Очевидно, что вместо смены цвета вы могли поменять кнопку как угодно. Например, добавить ей тень:

2. Как расширить область hover

Менять кнопку при наведении вы научились. А что, если вы хотите менять кнопку по наведению мыши на тег рядом с ней?

2.1. Запустите стартовый шаблон

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style type="text/css">
      .animated-btn {
          background-color: red;
      }
      .btn-wrapper {
          height: 100px;
          width: 100px;
          background-color: green;
          display: flex;
          align-items: center;
          justify-content: center;
      }
    </style>
  </head>
  <body>
    <div>
      <button>Кнопка</button>
    </div>
  </body>
</html>

Выглядит это примерно так:

2.2. Добавьте класс с новым стилем

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

. btn-wrapper .animated-btn {
    background-color: blue;
}

Результат:

2.3. Добавьте :hover

На этот раз :hover должен достаться селектору для зелёного прямоугольника:

.btn-wrapper:hover .animated-btn {
    background-color: blue;
}

Понять как работает селектор можно, прочитав его задом наперёд:

Найди элемент с классом animated-btn, да такой, чтобы среди родителей у него был элемент с классом btn-wrapper и мышь была наведена на этого родителя. Вот как это выглядит в действии:

3. Что делать, если не получилось

Бывает такое, что пишешь анимацию, а она всё равно не работает. И что делать?

3.1. Проверьте, что один элемент внутри другого

Зайдите в Chrome Dev Tools и найдите элемент, к которому подключаете анимацию. Он точно внутри нужного тега?

3.2. Проверьте селектор

На вкладке Elements в Chrome Dev Tools нажмите комбинацию клавиш Ctrl+F. Откроется поле для поиска тегов. Вбейте туда свой селектор и нажмите Enter. Нужный тег должен подсветиться жёлтым цветом. Если этого не произошло, то ваш селектор написан неправильно.

3.3. Проверьте стили

Возможно ваш стиль просто не работает. Уберите :hover и проверьте, что стиль срабатывает правильно хотя бы без анимации.

Читать дальше

  • Какие существуют псевдоклассы
  • Полный список псевдоклассов на MDN (en)
  • Специфичность селекторов

Использование псевдоклассов в Mobile SMARTS

Mobile SMARTS платформа

← Предыдущая статья Читать далее «Использование переменных и событий» →

Категории:  Псевдо-HTML верстка в Mobile SMARTS

Последние изменения: 13.05.2022

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

Классическим примером применения псевдоклассов является ссылка, которая меняет свой цвет при наведении на неё курсора или ссылка, меняющая свой цвет после того, как по ней осуществили переход.

В Mobile SMARTS используются следующие псевдоклассы:

  • hover (для кнопок и списков) — определяет стиль элемента, на который наведён курсор мыши.
  • active (для кнопок и списков) — определяет стиль ссылки (элемента), которая становится активной, но переход по ней еще не совершен.
  • disabled (для кнопок) — определяет стиль кнопки с атрибутом enabled= «False».

С помощью псевдоклассов в Mobile SMARTS можно делать динамичными кнопки и элементы списка. Для этого потребуется добавить строки кода (см. примеры ниже) в файл global.css, который находится на ПК в папке по пути «C:\ProgramData\Cleverence\Databases\имя вашей базы\Documents» (путь указан по умолчанию). На ТСД этот файл дублируется, и может иметь названия global. css, global.android.css, global.cf.css.

Рассмотрим подробнее примеры кода для создания динамичных элементов.

  1. Для кнопок.

    Возьмем за образец кнопку «Выйти» в окне успешной активации лицензии для продукта Frontol Simple Mobile. С помощью псевдоклассов можно сделать эту кнопку всегда активной, всегда неактивной или подсвечивать другим цветом в момент длительного нажатия.

    Код кнопки:

    CSS
    <button direction="return" ><r  color="#EF5981">ВЫЙТИ</r></button>

    Css-класс white_button

    • Кнопка активна.

    CSS
    {
.white_button:active
}
background-color: #FFFFFF;
corner-radius: 4%;
font-size:14dp;
border: 0px solid #1F3C5B;
color: white;
padding: 10dp 16dp 9dp 16dp;

  2. Кнопка неактивна.

    CSS
    {
white_button:disabled
}
background-color: #6A7F8D;
corner-radius: 4%;
font-size:14dp;
border: 0px solid #1F3C5B;
color: white;
padding: 10dp 16dp 9dp 16dp;
}

  3. Кнопка меняет цвет при длительном нажатии.

    CSS
    {
.white_button:hover
}
background-color: #FFFFFF;
corner-radius: 4%;
font-size:14dp;
border: 0px solid #1F3C5B;
color: white;
padding: 10dp 16dp 9dp 16dp;

    4. В данном случае псевдоклассами являются hover, active, disabled. Для каждого случая задан свой атрибут background-color, что позволяет гибко регулировать цвет фона кнопки для разных случаев.

  4. Для элементов списка.

    При длительном нажатии элемент списка подсвечивается другим цветом. Реализуется с помощью псевдоклассов active, disabled.

    CSS
    .list_item_custom
{
background-color: #EDF2F6;
padding:0dp 0dp 5dp 0dp;   
}
.list_item_custom:active
{
background-color: #919191;   
padding:0dp 0dp 5dp 0dp;
}
.list_item_custom:disabled
{
background-color: #6A7F8D;   
padding:0dp 0dp 5dp 0dp;
}

После того как вы внесли правки в файл global.css на ПК, потребуется удалить из папки «MobileSMARTSv3 —> Documents» на ТСД папку базы, для которой вы вносили изменения, и заново подключиться к ней.

В противном случае внесенные правки не будут применены к приложению на ТСД.


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

Читать далее «Использование переменных и событий» →

Изменение цвета кнопки в режиме наведения • Беатрис Карабальо

Все приемы CSSИзменение цвета7.07.1Наведение/наложение

Автор Беатрис Карабальо

  • 00
  • 01
  • 02
  • 03
  • 99

Один из способов сделать кнопки вашего шаблона не только уникальными и фирменными, но и пригласить вашу аудиторию нажимать, — это добавить

привлекательный режим наведения.

Кнопки Squarespace уже предлагают два стиля:

Но что, если вы хотите, чтобы изменения происходили наоборот? От сплошного к контурному или от одного цвета к другому?

В этом посте вы узнаете, как добиться этих двух эффектов с помощью пары строк CSS!

Примечание: в этом уроке мы нацелились на кнопку Squarespace среднего размера со слегка закругленными краями. Вам нужно будет найти соответствующие классы для кнопки, которую вы используете.

Поиск класса вашей кнопки

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

Затем, выбрав элемент a , перейдите на правую боковую панель и из самой верхней группы классов выделите и скопируйте часть, выделенную черным цветом.

Серый текст относится к классам кнопок, которые имеют тот же стиль, что и выбранный вами (например, закругленный), но разных размеров. Раздел, выделенный черным цветом, — это классы для размера кнопки, который вы сейчас выбираете. В этом случае вся группа читается так:

 .small-button-shape-rounded . sqs-block-button .sqs-block-button-element--small,
.medium-button-shape-rounded .sqs-block-button .sqs-block-button-element — средний,
.large-button-shape-rounded .sqs-block-button .sqs-block-button-element—large {
  
}

Но в этом примере для изменения кнопки среднего размера будет использоваться только темно-серая секция.

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

Изменение цвета кнопки при наведении

Чтобы изменить цвет фона сплошной кнопки, вам нужен только второй шестнадцатеричный код для изменения свойства background-color . В этом примере он изменится с черного на зелено-синий цвет #009.999.

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

 .medium-button-shape-rounded .sqs-block-button .sqs-block- кнопка-элемент-средний {
  
}

Если бы вы изменили свойства этого фрагмента как есть, вы изменили бы саму кнопку. Попробуйте! Добавьте это в свой фрагмент и посмотрите, как кнопка меняет цвет фона:

 .medium-button-shape-rounded .sqs-block-button .sqs-block-button-element--medium {
  цвет фона: #009999;
}

Однако, поскольку вы хотите отредактировать режим наведения, вам нужно использовать псевдокласс :hover после последнего класса, например:

 .medium-button-shape-rounded .sqs-block- кнопка .sqs-block-button-element--medium:hover {
}

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

 .medium-button-shape-rounded .sqs-block-button .sqs-block-button-element--medium:hover {
  цвет фона: #009999;
}

Изменение сплошной кнопки на контурную

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

Итак, если у вас есть черная кнопка и вы хотите переключиться на белую кнопку с черной рамкой, вам нужно добавить:

 .medium-button-shape-rounded .sqs-block-button .sqs-block-button-element--medium:hover {
  цвет фона: прозрачный;
  граница: 2px сплошная #000000;
  цвет: #000000;
}

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

Что касается границы, вы можете изменить 2px на любую желаемую толщину (1px, 3px…) и добавить соответствующий шестнадцатеричный код цвета, где #000000.

Цвет шрифта изменяется благодаря свойству color , где #000000 можно заменить на выбранный вами цвет.

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

НАВЕДИТЕ НАД МНОЙ

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

 .medium-button-shape-rounded .sqs-block-button .sqs-block-button-element --Средняя {
  граница: 2px сплошная #000000;
}

Примечание: для некоторых кнопок Squarespace изменения не будут работать, если вы не используете правило !important , подобное этой границе: 2px solid #000000 !important ; Просто не забудьте использовать его ТОЛЬКО в случае необходимости.

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

НАВЕДИТЕ НАД МНОЙ

 

Как насчет этого? Теперь вы можете добавить два разных режима наведения к своим кнопкам Squarespace всего несколькими строками CSS.

До следующего раза,
B.

Полный код 

 /*ОТ ТВЕРДОГО К ТВЕРДОМУ*/
.medium-button-shape-rounded .sqs-block-button .sqs-block-button-element--medium:hover {
  цвет фона: #009999;
} 
 /*ЗАВЕРШЕНО ДЛЯ КОНТУРА*/
.medium-button-shape-rounded .sqs-block-button .sqs-block-button-element--medium {
  граница: 2px сплошная #000000;
}
.medium-button-shape-rounded .sqs-block-button .sqs-block-button-element--medium:hover {
  цвет фона: прозрачный;
  граница: 2px сплошная #000000;
  цвет: #000000;
}

Блок кнопок

Беатрис Карабальо

Эй! Меня зовут B.

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

https://beatrizcaraballo.com

CSS | Анимация для изменения состояния наведения кнопки/изображения

Улучшить статью

Сохранить статью

  • Последнее обновление: 29 июл, 2021

  • Прочитать
  • Обсудить

    • Улучшить статью

    Сохранить статью

    1. Для изменения цвета/размера кнопки в состоянии наведения.

    Подход:

    • Установите анимацию и продолжительность состояния наведения
    • Установите цвет фона с помощью @keyframes

    Синтаксис:

    3 {кнопка hover:

    имя-анимации: цвет фона; продолжительность анимации: 500 мс; } @keyframes цвет фона { 100% { цвет фона:#4065F3; } }

    Examples:

    HTML

    < html >

     

    < head >

         Изменение цвета кнопки при наведении

    голова >

    < стиль >

         кнопка {

             радиус границы: 5 пикселей;

             цвет: белый;

             background-color: #368508;

             заполнение: 5 пикселей 10 пикселей 8 пикселей 10 пикселей;

    }

    /*Состояние пуговицы* /

    button:hover {

             имя-анимации: цвет фона;

             продолжительность анимации: 500 мс;

         }

        

         /*keyframes*/

         @keyframes background-color {

             100% {

                 цвет фона: #4065F3;

             }

         }

    style >

     

    < body >

         < br >

         < br >

         < button >GeeksforGeeks button >

    body >

     

    html >

    Output :
    Первоначально кнопка выглядит так:
     

    При наведении она меняется на это:

    2. Чтобы изменить цвет/размер изображения 9 в состоянии наведения0003

    . Подход: