Каскадные таблицы стилей (CSS) разработаны с использованием или в формате XML (включая XHTML, SVG). Это язык таблиц стилей, который в основном используется для описания элементов с помощью разнообразных методов форматирования. Один из методов - наведение, и в этой статье мы будем понимать наведение в CSS следующим образом:

• Что такое Hover в CSS?
• Где используется наведение?
• Что делает Hover?
• Совместимость
• Как это работает?
• Цвет фона при наведении курсора изменится на «Красный»
• Создание прозрачности при наведении курсора на изображения
• Создание наложения текста на изображения

Что такое Hover в CSS?

CSS hover - это компонент селектора, который используется для стилизации различных элементов при наведении указателя мыши на них. Их можно использовать почти в каждом элементе HTML. Функция наведения в CSS имеет большое значение при разработке веб-страниц.

Компонент наведения может выделять, кодировать и настраивать веб-страницы в соответствии с предпочтениями пользователя в компактной и эффективной программе веб-дизайна.

Где используется наведение?

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

передача по ссылке в java

Что делает Hover?

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

• Изменение цвета фона / шрифта
• Встраивание скрытого текста, отображаемого при наведении курсора
• Создание эффектов ролловера для изображений
• Автоматическое масштабирование текста / изображений
• Изменить непрозрачность изображения
• Встраивание текста
• Обмен изображениями
• Div. Парение
• Множество других операций форматирования CSS при наведении курсора.

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

Совместимость Hover в CSS

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

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

Как Hover работает в CSS?

Активный стиль псевдокласса является доминирующим в форматировании CSS при наведении курсора и отменяет любую / все последующие ссылки, за которыми следует этот псевдокласс. Например, в псевдоклассе «: link: visit» или: active правило: hover необходимо разместить после: link и: loaded, но до: active для соответствующего стиля: hover. LVHA-порядок:: ссылка,: hover,: посещенный и: активный используется как ссылка для правильного стиля форматирования: hover.

div {background-color: green padding: 18px display: none} span: hover + div {display: block}Hover Test!Скрытый код отображается при наведении курсора

В приведенном выше коде элемент span изменен, чтобы объединить элементы hover и div, используя элемент span: hover + div. В элементе span, который будет отображаться на основной целевой веб-странице, будет отображаться текст «Hover test!» Дальнейшее наведение курсора на элемент span показывает элемент div «Скрытый код отображается при наведении курсора». Этот формат встраивания работает как с текстом, так и с изображениями.

использовать Python в Visual Studio

Цвет фона при наведении курсора изменится на «Красный»

p: hover, h1: hover, a: hover {background-color: Red}
Парящий красный
 
Парящий красный
 
Ссылки:
 
Красный тест при наведении:
  Google com  
  Заметка: Здравствуйте
 

Приведенный выше код настраивает

,

и element и объединяет их в общую функцию наведения. Этот код предназначен для изменения цвета текста на красный при наведении указателя мыши на них. Компоненты h1 и h2 отображают «CSS: код проверки при наведении» и «красный при наведении» соответственно. Элемент абзаца: Hover Test Red и тег привязки: google.com выделяются красным цветом при наведении на них указателя мыши.

Создание прозрачности при наведении курсора на изображения

.pic {ширина: 1900 пикселей высота: 1900 пикселей непрозрачность: 1 фильтр: альфа (непрозрачность = 100) фон: URL (https://cdn.pixabay.com/photo/2013/07/13/11/29/orange-158258_1280. png) no-repeat} .pic: hover {непрозрачность: 0,2 фильтр: альфа (непрозрачность = 30)}

Приведенная выше программа CSS отображает изменение прозрачности изображения при наведении курсора. Исходная непрозрачность изображения один однако с использованием фильтра наведения непрозрачности он был изменен на 0,2. Этот код показывает, что с помощью элемента наведения можно изменить прозрачность изображения и / или текста.

трекер заданий и трекер задач в hadoop

Создание наложения текста на изображения

.pic {width: 4000px height: 2170px background: url (http://eatlogos.com/food_and_drinks/png/vector_orange_logo.png) no-repeat} .text {width: 3400px height: 2170px background: #FFF opacity: 0} .pic: hover .text {opacity: 0.6 text-align: justify color: # 000000 font-size: 20px font-weight: 700 font-family: 'Times New Roman', Times, заполнение с засечками: 30px} Оранжевый - это волокно богатые фрукты. Антиоксиданты, содержащиеся в апельсине, помогают пищеварению, придают коже сияние и действуют как антивозрастной элемент.

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

На этом мы завершаем все важные аспекты наведения курсора в CSS и подчеркиваем его удобство использования в веб-разработке. Есть много специальных эффектов, которые он может добавить на наши веб-страницы. Мы всегда можем попробовать различные комбинации селектора наведения с другими свойствами CSS, такими как анимация, фоновые изображения, гиперссылки и т. Д., И изучить его потенциал, как мы видели в некоторых из наших примеров. Наконец, CSS - один из наиболее эффективных способов проектирования и преобразования веб-страниц, и поэтому веб-разработчикам необходимо овладеть этим навыком для создания динамических веб-страниц.

Ознакомьтесь с нашими который включает в себя живое обучение под руководством инструктора и реальный проектный опыт. Это обучение позволит вам овладеть навыками работы с серверными и интерфейсными веб-технологиями. Он включает обучение веб-разработке, jQuery, Angular, NodeJS, ExpressJS и MongoDB.

Есть вопрос к нам? Пожалуйста, укажите это в разделе комментариев блога «Наведите курсор на CSS», и мы свяжемся с вами.