Разное

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

05.07.2023

Содержание

tasks/tasks/rs-css.md at master · rolling-scopes-school/tasks · GitHub

В этом задании мы создадим тренажер для изучения css-селекторов. Тренажер состоит из нескольких игровых уровней. Каждый уровень включает в себя пример вёрстки и html-код, который отвечает текущему уровню. Некоторые элементы вёрстки выделены при помощи анимации. Задача пользователя — написать css-селектор, отвечающий всем выделенным элементам вёрстки.

Прототип тренажера — приложение CSS Diner, из которого необходимо воспроизвести только игровую часть. Перед началом выполнения задания внимательно ознакомьтесь с особенностями работы приложения-прототипа, это ускорит выполнение задания и облегчит понимание его требований.

Структура приложения

  • Блок 1. Пример вёрстки. На оригинальном сайте это стол с посудой и продуктами. Вы можете придумать и использовать свой вариант оформления.
  • Блок 2. Окно для ввода кода пользователем.
  • Блок 3. Код вёрстки. При наведении курсора на фрагмент кода, подсвечивается отвечающий этому фрагменту элемент вёрстки. При наведении курсора на элемент вёрстки, подсвечивается соответствующий ему фрагмент в блоке с кодом. В обоих перечисленных случаях рядом с элементом отображается его html-код
  • Блок 4. Список уровней игры. На оригинальном сайте тридцать два уровня, вам достаточно выполнить десять-двадцать уровней. Большее количество уровней можно сделать по желанию и при наличии свободного времени.

Ключевые навыки:

  • TypeScript
  • Modules
  • Webpack

Работа приложения

  • в окне для ввода кода пользователь может напечатать и отправить на проверку css-селектор, который соответствует всем выделенным элементам вёрстки. Отправить код на проверку можно как кликом по кнопке Enter в окне для ввода кода, так и нажатием клавиши Enter на клавиатуре (оба варианта должны работать)
  • для правильных и неправильных ответов предусмотрена соответствующая анимация. В оригинальном приложении при правильном ответе происходит вылет выделенных элементов за пределы экрана, при неправильном ответе — подёргивание окна с кодом. Вы можете использовать другую анимацию, на ваш взгляд более уместную и привлекательную
  • при правильном ответе пользователь переходит на следующий уровень игры, или выводится уведомление о победе, если уровень последний
  • в приложении есть кнопка Help для тех случаев, когда пользователь не может угадать нужный селектор. Клик по кнопке Help выводит нужный селектор в окне для ввода кода. Селектор выводится в блоке для ввода кода с эффектом печати текста (плавное появление текста по буквам)
  • в блоке со списком уровней игры есть возможность переходить к определённому уровню кликая по его номеру; возле каждого уровня отображается, выполнен он, или нет, или уровень выполнен с использованием подсказки. Текущий уровень подсвечен. При перезагрузке приложение открывается на этом же уровне. Есть кнопка, позволяющая сбросить прогресс и начать прохождение игры заново

Требования к репозиторию

  • задание выполняется в приватном репозитории школы Как работать с приватным репозиторием. Если у вас нет приватного репозиторий школы, задание можно выполнять в личном приватном репозитории.
  • в приватном репозитории создайте ветку с названием задания, в ней создайте папку с названием задания, и в ней разместите файлы проекта
  • для деплоя используйте gh-pages Как сделать деплой задания из приватного репозитория школы. Если вы не можете задеплоить проект на gh-pages, для деплоя можно использовать https://app.netlify.com/drop
    Для демоверсий, размещённых на netlify, название страницы дайте по схеме: имя гитхаб аккаунта — название таска
  • история коммитов должна отображать процесс разработки приложения. Требования к коммитам
  • после окончания разработки необходимо сделать Pull Request из ветки приложения в ветку main Требования к Pull Request. Мержить Pull Request не нужно

Как сабмитить задание

Засабмитить задание необходимо как можно раньше, как только в rs app появится такая возможность.

Для этого зайдите в rs app https://app.rs.school/, выберите пункт Cross-Check: Submit, в выпадающем списке выберите название таска, в поле Solution URL добавьте ссылку на задеплоенную версию вашего приложения, нажмите кнопку Submit.
После сабмита задания его можно продолжать выполнять до самого дедлайна.

Требования к оформлению приложения

  • внешний вид приложения соответствует предложенному образцу или является его улучшенной версией
  • для стандартных разрешений экрана монитора до 1024×768 включительно, приложение полностью помещается в экран без появления полосы прокрутки. При меньшем разрешении экрана может появиться вертикальная полоса прокрутки. Минимальная ширина страницы, при которой проверяется корректность отображения приложения — 500рх
  • интерактивность элементов, с которыми пользователи могут взаимодействовать, изменение внешнего вида самого элемента и состояния курсора при наведении, использование разных стилей для активного и неактивного состояния элемента, плавные анимации
  • в футере приложения есть ссылка на гитхаб автора, год создания приложения, логотип курса со ссылкой на курс

Технические требования

  • для написания кода приложения используется TypeScript.
  • код разбит на модули.
  • для сборки кода используется webpack.
  • используется eslint, настроенный для проверки TypeScript.
  • работа приложения проверяется в браузере Google Chrome последней версии
  • можно использовать bootstrap, material design и другие css-фреймворки, html и css пост/препроцессоры.
  • запрещается использовать jQuery
  • запрещается использовать Angular/React/Vue и/или подобные им фреймворки/библиотеки.
  • можно использовать js-библиотеки для подсветки кода (highlight.js, CodeMirror, Ace etc.)

Критерии оценки:

Кросс-чек

Максимальный балл за задание: 150 баллов при кросс-чеке / 200 баллов при проверке ментором

Basic scope +70
  • вёрстка, дизайн, UI. Внешний вид приложения соответствует приложению-прототипу или является его улучшенной версией. Выполняются требования к оформлению приложения +10
  • используются собственные оригинальные интересные разнообразные задания на нахождение css-селекторов. Количество заданий не меньше десяти +10
  • выполнен блок 1 с примером вёрстки. Элементы, для которых необходимо написать css-селектор, выделены при помощи анимации +10
  • выполнен блок 2 с окном для ввода кода пользователем. В окне для ввода кода можно напечатать css-селектор +10
  • выполнен блок 3 с кодом вёрстки, в котором отображается код вёрстки +10
  • выполнен блок 4 со списком уровней игры. У пользователя есть возможность переходить к определённому уровню кликая по его номеру +10
  • текущий уровень подсвечен. При перезагрузке приложение открывается на этом же уровне +10
Advanced scope +80
  • подсветка html и css-кода в блоках 2 и 3 — окне для ввода кода пользователем и блоке с кодом вёрстки. Для подсветки кода могут использоваться js-библиотеки +10
  • при наведении курсора на строку в блоке с кодом, отвечающий этой строке элемент в блоке с примером вёрстки подсвечивается. Рядом с элементом отображается его html-код +10
  • при наведении курсора на элемент в блоке с вёрсткой, подсвечивается соответствующий ему фрагмент в блоке с кодом. Рядом с элементом отображается его html-код +10
  • введённые пользователем селекторы можно отправить на проверку как кликом по кнопке Enter в окне для ввода кода, так и нажатием клавиши Enter на клавиатуре. Отправленные на проверку селекторы проверяются на соответствие требованиям задания +10
  • проверку проходят любые селекторы, отвечающие всем выделенным элементам. +10
  • если пользователь ввёл правильный css-селектор, отвечающий всем выделенным элементам, отображается соответствующая анимация, и автоматически открывается следующий уровень игры, или выводится уведомление о победе, если уровень последний. Если пользователь ответил неправильно, отображается соответствующая анимация. +10
  • в приложении есть кнопка Help для тех случаев, когда пользователь не сумеет угадать нужный селектор. Клик по кнопке Help выводит нужный селектор в окне для ввода кода.
    Селектор выводится с эффектом печати текста (плавное появление текста по буквам) +10
  • возле каждого уровня игры отображается, выполнен он, или нет, или уровень выполнен с использованием подсказки. Есть кнопка, позволяющая сбросить прогресс и начать прохождение игры заново +10

Проверка ментором

Максимальный балл за задание +200

  1. Репозиторий +20
    • pull request выполнен в соответствии с требованиями +10
    • ведётся история коммитов, названия коммитов даются согласно гайдлайну +10
  2. Качество кода +160
    • приложение написано на TypeScript.
      • используется Everyday Types +10
      • используются Generics +10
      • использование Object Types +10
      • использование Classes +10
      • использование Function +10
      • нигде не используется тип Any +10
      • ESLinter настроен на TypeScript (используется плагин typescript-eslint/recommended) и отсутствуют ошибки +10
      • В конфигурационном файле TypeScript стоят флаги "noImplicitAny": true и "strict": true + 20
      • webpack, eslint настроен и работает с TypeScript +10
    • дублирование кода сведено к минимуму, не используются магические числа, используются осмысленные имена переменных и функций, оптимальный размер функций и т. д. +10
    • код разбит на модули +10
    • динамическое добавление новых компонентов средствами JavaScript(в зависимости от приложения возможны: определенные элементы игры, новые уровни, карточки элементов/товаров) +10
    • у ментора нет замечаний к качеству кода, либо все замечания ментора исправлены +30
  3. Тесты в приложении +20
    • реализованы юнит-тесты, использующие различные методы jest – 2 балла за каждую покрытую функцию/метод, но не более 20 баллов (процент покрытия каждой функции/метода не учитывается)

Штрафы ментора.

  1. Не используется TypeScript — 200.
  2. Используется тип Any -40
  3. Код не полностью покрыт типами -20
  4. В конфигурационном файле ESLint не включено правило no-explicit-any -10

Запрещено копировать код других студентов, демо, примеров, которые приводятся в задании. Этот запрет касается html, css, js кода. Можно использовать небольшие фрагменты кода со Stack Overflow, других самостоятельно найденных источников в интернете, за исключением github-репозиториев студентов курса. Возле использованного чужого фрагмента кода в комментарии указывается ссылка на источник.

Полезные материалы

  • Typescript

    • Официальная документация TypeScript
    • Руководство по TypeScript
    • Практическое руководство по TypeScript для разработчиков
    • TypeScript. Полный курс
    • TypeScript — Быстрый Курс за 70 минут

  • Webpack

    • Сборка webpack студента предыдущего набора
    • Webpack для начинающих
    • (Очень простое) Руководство для начинающих по webpack
    • Настройка Webpack 5 с нуля

  • Библиотеки для подсветки кода

    • highlight.js — лучшая подсветка синтаксиса кода
    • Code Mirror — динамичная подсветка кода в браузере

  • Советы по качеству кода

    • Магические числа
    • Как писать чистый код: обзор лучших практик JavaScript
    • Рекомендации по написанию чистого кода на JavaScript

  • Unit tests

    • testing module
    • jest-dom documentation

Вебинары RS School

  • JS/FE 2021Q3 Typescript Basics
  • Typescript 26. 05.21 (part 1)
  • Typescript 28.05.21 (part 2)

Как сделать так, чтобы наведение вызывало другое наведение в CSS? — HTML и CSS — Форумы SitePoint

andrewecookcook 1

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

ПолОБ 2

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

На самом деле вы не можете инициировать наведение на что-то еще, но вы можете изменить что-то еще, пока вы наводите курсор на другое место (в зависимости от структуры). например Вы наводите курсор на div, а затем вы можете стилизовать дочерний элемент, пока родительский элемент наведен, или вы можете стилизовать соседний элемент, но эффект на соседний элемент теряется, как только вы отводите мышь (в отличие от дочернего элемента, который может оставаться активным все время, пока родитель зависает.
)

зухайбтаха210 3

В CSS вы можете сделать так, чтобы одно наведение вызывало другое наведение, используя псевдокласс «:hover» и псевдокласс «:active». Вот пример того, как это можно сделать:

HTML:

 

  
Наведите курсор 1

  
Наведите курсор 2

CSS:

 .container {
  дисплей: гибкий;
  выравнивание элементов: по центру;
  выравнивание содержимого: по центру;
  высота: 100вх;
}
. hover-1: зависание + .hover-2 {
  цвет фона: желтый;
}
.hover-2: активный {
  цвет фона: красный;
}

В этом примере при наведении курсора на элемент «Наведение 1» фон элемента «Наведение 2» будет желтым. Когда вы нажмете «Hover 2», его цвет фона изменится на красный.

Обратите внимание, что этот метод работает только в том случае, если второй элемент наведения является родственным элементу первого элемента наведения и расположен сразу после первого элемента. Селектор «+» используется для выбора второго элемента сразу после первого элемента.

ПолОБ 4

Нет, вы не можете вызвать состояние наведения на что-то еще, как я уже объяснял выше.

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

м_хатли 5

Как говорит Пол, вы можете «подделывать» активацию состояния наведения на братьях и сестрах/потомках и т. д.; вы можете (обычно) делать это и двунаправленно. Но стоит отметить, что вы не , а , активирующий состояние наведения на другом элементе, что может быть важным отличием для Javascript и т. д.

1 Нравится

rpg_digital 6

Привет @zuhaybtaha210, добро пожаловать на форум.

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

Это завершит код открытием и закрытием тиков ``` ваш код здесь ```

На этот раз я сделал это для вас

1 Нравится

Гэндальф Закрыто 10

3 красивых CSS-эффекта при наведении курсора, которые можно добавить в меню Divi

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

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

Мы добавим не только красивый эффект наведения, но и стиль, примененный к ссылке на активной странице. Например, если пользователь находится на главной странице, к домашней ссылке в меню будет применена какая-то небольшая дизайнерская обработка. Это обычный визуальный маркер, который следует размещать на веб-сайтах, чтобы напомнить пользователю, где он находится на сайте. Это не обязательно, но это хороший полезный UX.

Начнем!

  • 1 3 красивых эффекта наведения CSS, которые вы можете добавить в свои меню Divi
  • 2 Настройки настройщика темы
  • 3 Первый стиль – линия роста снизу
    • 3.1 Вдохновение
    • 3.2 Выполнение
  • 4 Второй стиль – толстый «квадратный» вид с линией внизу.
    • 4.1 Вдохновение
    • 4.2 Выполнение
  • 5 Стиль третий – кнопки с фоновым цветом
    • 5.1 Вдохновение
    • 5.2 Выполнение
  • 6 Примеры этих стилей на сайтах Divi «In the Wild»
    • 6.1 Полное обслуживание лифта
    • 6.2 Детская тема Executive Premium Divi
    • 6.3 Терпеть веб-студии
  • 7 Подведение итогов

3 красивых CSS-эффекта наведения, которые можно добавить в меню Divi

Подпишитесь на наш канал Youtube

Настройки настройщика тем

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

Style One – Линия роста под

В этом стиле меню мы добавим линию, которая растет слева направо прямо под пунктом меню, над которым наведен курсор. Он также установит статическую строку непосредственно под ссылкой на активную страницу.

Вдохновение

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

Реализация

Добавьте следующий код в дочернюю таблицу стилей ИЛИ в параметры темы Divi > общие > пользовательское поле CSS :

 #top-menu . current-menu-item a::before,
#top-menu .current_page_item a::before {
 содержание: "";
 положение: абсолютное;
 z-индекс: 2;
 слева: 0;
 справа: 0;
}
#top-menu li a:before {
 содержание: "";
 положение: абсолютное;
 z-индекс: -2;
 слева: 0;
 справа: 100%;
 низ: 50%;
 фон: #15bf86; /*** ЦВЕТ ЛИНИИ***/
 высота: 3 пикселя; /*** ТОЛЩИНА ЛИНИИ ***/
 -webkit-transition-свойство: правильно;
 свойство перехода: право;
 -webkit-transition-duration: 0,3 с;
 продолжительность перехода: 0,3 с;
 -webkit-transition-timing-function: облегчение;
 функция синхронизации перехода: облегчение;
}
#top-menu li a:hover {
 непрозрачность: 1 !важно;
}
#top-menu li a:hover:before {
 справа: 0;
}
#top-menu li li a:before {
 низ: 10%;
}

Style Two – Толстый «квадратный» вид с линией под ним

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

Вдохновение

Я сам использую этот стиль в разработанной мной дочерней теме Divi под названием Executive (ниже я приведу ссылку на демо, чтобы вы могли увидеть наведение в действии на реальном сайте). Визуально это не так тонко, как первый стиль, я думаю, что выбор правильного сайта для его использования будет ключевым. Важно, чтобы любые мелкие детали дизайна, такие как эффект наведения, соответствовали общему ощущению сайта.

Реализация

Добавьте приведенный ниже код в таблицу стилей вашей дочерней темы или в пользовательское поле css Divi на вкладке «Общие параметры темы». Что касается простоты редактирования, цвет изменить очень легко, но если вы планируете изменить ширину границы, вам придется поиграть с другими числами в CSS.

 #верхнее меню li > a:hover {
 box-shadow: 0 10px 0 0 #F15A29 !важно; /*** ЦВЕТ И ТОЛЩИНА ЛИНИИ ПРИ НАВЕДЕНИИ ***/
 отступ снизу: 34px;
 непрозрачность: 1 !важно;
}
#верхнее меню li li a {
 padding-bottom: 6px !важно;
}
#top-menu li. current-menu-item > а,
.et-fixed-header #top-menu li.current-menu-item > a {
 граница: 10px сплошная #F15A29; /*** ЦВЕТ И ТОЛЩИНА КОРОБКИ ***/
 отступ: 10 пикселей;
 нижняя граница: -10px;
}

Style Three – Кнопки с фоновым цветом

Этот стиль меню превращает пункты меню в кнопки с согласованными цветами при наведении. Это также придает другой, отдельный цвет активной ссылке меню.

Вдохновение

Это, конечно, вдохновлено кнопками 😀 Мне очень нравится, как выглядит кнопочная навигация. Я также думаю, что, как и первый стиль, это довольно универсальный вид, который может работать практически на любом сайте. Изменение цвета фона также довольно просто.

Реализация

Как и в случае с двумя другими вышеприведенными стилями, вам нужно добавить приведенный ниже пользовательский код CSS в таблицу стилей вашей дочерней темы или в поле пользовательского CSS на вкладке общих настроек темы Divi. Вы можете вносить свои собственные коррективы и изменения в код (например, цвета), корректируя значения рядом с закомментированными частями кода.

 .et_header_style_left #et-top-navigation nav > ul > li > a,
.et_header_style_left .et-fixed-header #et-top-navigation nav > ul > li > a {
 нижний отступ: 15px;
}
#верхнее меню ли {
 отступ справа: 5px;
}
#et-top-навигация {
 отступ: 20px 0 !важно;
}
#верхнее меню li a {
 фон: #C1B2AB; /*** МЕНЯЕТ ЦВЕТ ФОНА ***/
 отступ: 15px 20px;
 радиус границы: 3px;
}
#top-menu li a:hover,
#top-menu li li a:hover {
 цвет: #fff !важно;
}
#top-menu li a:hover {
 фон: #559САПР !важно; /*** МЕНЯЕТ ЦВЕТ ФОНА ПРИ НАВЕДЕНИИ ***/
}
#top-menu li.current-menu-item > a {
 фон: #edc77b; /*** ИЗМЕНЯЕТ ЦВЕТ ФОНА ССЫЛКИ НА ТЕКУЩУЮ СТРАНИЦУ ***/
}
#top-menu .menu-item-has-children > a:first-child:after {
 содержание: нет;
}

Примеры этих стилей на сайтах Divi «In the Wild»

Вот несколько примеров использования этих стилей (или очень похожих) на живых веб-сайтах Divi.

Полное обслуживание лифта

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

Посмотреть полный сайт обслуживания лифтов

Детская тема Executive Premium Divi

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

Посмотреть дочернюю тему Executive Premium Divi

Терпеть веб-студии

Итак, мне было очень трудно найти сайт, на котором для каждой ссылки в меню использовались кнопки. Я написал CSS только для этого руководства, но в Endure показано популярное использование одной ссылки в виде кнопки, поэтому третий стиль в этом руководстве просто берет эту идею и использует ее для всех навигационных ссылок.

Посмотреть сайт Endure Web Studios

Завершение

Мы надеемся, что вы сможете найти применение одному или даже всем этим стилям наведения меню на своих веб-сайтах Divi.

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *