Каскадните таблици със стилове (CSS) са проектирани с помощта на или XML (включително XHTML, SVG) формат. Това е език на таблицата със стилове, използван предимно за описание на елементи чрез разнообразна поредица от методи за форматиране. Един от методите е зависване и в тази статия ще разберем Hover в CSS по следния начин:

• Какво е Hover в CSS?
• Къде се използва Hover?
• Какво прави Hover?
• Съвместимост
• Как работи?
• Промяна на цвета на фона на мишката на „Червен“
• Създаване на непрозрачност при задържане върху изображения
• Създаване на наслагване върху текст върху изображения

Какво е Hover в CSS?

CSS hover е селекторен компонент, който се използва за стилизиране на различни елементи, когато курсорът на мишката се наведе над тях. Те могат да се използват на почти всеки HTML елемент. Функцията за задържане в CSS има съществено значение при проектирането на уеб страници.

Компонентът за задържане може да откроява, кодира и персонализира уеб страници според предпочитанията на потребителя в компактна и ефективна програма за уеб проектиране.

Къде се използва Hover?

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

Какво прави Hover?

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

• Промяна на цвета на фона / шрифта
• Вграждане на скрит текст, който се показва при задържане
• Създайте ефекти на преобръщане върху изображения
• Автоматично увеличение на текст / изображения
• Променете непрозрачността на изображението
• Вграждане на текст
• Размяна на изображения
• Div. Задръжте курсора на мишката
• Няколко други операции за форматиране на курсора на CSS.

Ефектът на навеждането на главата в основата модифицира стойността на свойството на даден елемент, за да даде възможност за анимиране на промени в заявен текст / изображение или съответни елементи. Вграждането на CSS елементи за задържане в дизайна на уеб страница превръща обикновената уеб страница в интерактивна, стабилна и високо функционална уеб страница. Тези дизайни на уеб страници са лесни за употреба и изчерпателни. Уеб страниците, проектирани от Hover, съдържат по-висока привлекателност за потребителите и привличат вниманието на потенциалните клиенти.

какво е виртуален метод

Съвместимост на Hover в CSS

Функцията за задържане на курсора е съвместима с всички основни уеб браузъри. Внедряването на този елемент на сензорни устройства обаче все още е предизвикателна задача. Задържането на курсора на мишката в CSS позволява достъп до съдържанието на устройства, които не поддържат функции на задържане. Забелязано е, че активирана функция на задържане на неподдържащото устройство може да заседне на устройството.

Следователно, жизненоважното показване на изключително важно съдържание се блокира поради проблема с форматирането. От една страна, когато ховър елементът в програмата CSS допринася за високо ниво на ефективна персонализация на уеб страниците, обратно, неговата работоспособност на мобилни устройства е много неактивна. Капитулирайки пред обстоятелствата, в които светът на информационните технологии се разраства значително мобилен, функцията за навъртане рискува да остарее с технологичния напредък. Следователно необходимостта от изработване на преносима вградена функция, която работи с докосване и мобилни устройства, е изключително важна.

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

Активният стил на псевдоклас е доминиращ при форматирането на CSS при задържане и той заменя всяка / всички следващи връзки, последвани от този псевдоклас. Например в псевдоклас „: link: posjeтен, или: active правилото: hover трябва да се постави след: link и: посети, но преди: active за подходящ: hover стил. Поръчката LVHA:: link,: hover,: visit и: active се използва като справка за правилен: стил на форматиране на hover.

div {background-color: green padding: 18px display: none} span: hover + div {display: block}Тест с навъртане!Скритият код се показва при нанасяне на курсора на мишката

В горния код елементът span се модифицира, за да обедини елемента hover и div, като използва елемента span: hover + div. Елементът span, който ще се покаже на основната уебстраница за кацане, ще покаже текста „Тест с ховър!“ По-нататъшното задържане на елемента span обхваща елемента div „Скритият код се показва при нанасяне на курсора“. Този формат за вграждане работи както върху текста, така и върху изображенията.

Промяна на цвета на фона на мишката на „Червен“

p: hover, h1: hover, a: hover {background-color: Red}
Задръжте червено
 
Задръжте червено
 
Връзки:
 
Hover Test Red:
  Google com  
  Забележка: Здравейте
 

Горният код персонализира

,

и елемент и ги интегрира в обща функция на задържане. Този код е предназначен да промени цвета на текста на червен, когато курсорът на мишката се наведе над тях. Компонентът h1 и h2 показва съответно „CSS: Код за тестване на курсора“ и „Hover Red“. Елементът на абзаца: Проверка на курсора на червено и прикрепен маркер: google.com се откроява в червено, когато курсорът на мишката се наведе над тях.

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

.pic {ширина: 1900px височина: 1900px непрозрачност: 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. Този код показва, че с помощта на елемента за задържане може да се промени непрозрачността на изображение и / или текст.

Създаване на наслагване върху текст върху изображения

.pic {ширина: 4000px височина: 2170px фон: url (http://eatlogos.com/food_and_drinks/png/vector_orange_logo.png) no-repeat} .text {ширина: 3400px височина: 2170px фон: #FFF непрозрачност: 0} .pic: hover .text {непрозрачност: 0,6 текстово подравняване: оправдаване на цвят: # 000000 размер на шрифта: 20px шрифт-тегло: 700 семейство шрифтове: 'Times New Roman', Times, серифна подложка: 30px} Orange е влакно богати плодове. Антиоксидантите, присъстващи в портокала, могат да помогнат за храносмилането, да направят кожата блестяща и да действат като елемент против стареене.

Наслояването на текст в CSS hover е ефективен инструмент за вграждане на описателния текст на изображението в самото изображение. Този инструмент помага за осигуряване на компактен преглед на изображението, без да заема бездействащо пространство в ограничено пространство за уеб проектиране. В този код фоновото изображение е вградено с описателен текст, който се показва, когато курсорът на мишката се наведе над текста.

Това завършва всички важни аспекти на hover в CSS и подчертава неговата използваемост при уеб разработката. Има много специални ефекти, които може да внесе в нашите уеб страници. Винаги можем да изпробваме различни комбинации на селектора за задържане на мишката с други CSS свойства като анимация, фонови изображения, хипервръзки и т.н. и да изследваме неговия потенциал, както видяхме в някои от нашите примери. И накрая, CSS е един от най-мощните начини за проектиране и трансформиране на уеб страници и следователно е неизбежно уеб разработчиците да придобият това умение, за да създадат динамични уеб страници.

Вижте нашите което се предлага с обучение под ръководството на инструктори на живо и опит в реалния живот на проекти. Това обучение ви кара да владеете умения за работа с back-end и front-end уеб технологии. Включва обучение по уеб разработка, jQuery, Angular, NodeJS, ExpressJS и MongoDB.

Имате въпрос към нас? Моля, споменете го в раздела за коментари в блога „Задръжте в CSS“ и ние ще се свържем с вас.