Мазмуну:

Hover эффекттери деген эмне?
Hover эффекттери деген эмне?

Video: Hover эффекттери деген эмне?

Video: Hover эффекттери деген эмне?
Video: селекторы css 2024, Май
Anonim

Hover Effect : Поп жана фондо жандуу. Hover эффекти бир продукт үчүн. Сүрөт өйдө-ылдый пайда болот, андан кийин фон жылып, жанданат.

Ошондой эле билесизби, сүрөт курсорду кармап турганда текстти кантип көрсөтүүгө болот?

CSS3 гана колдонуп, Hoverдеги сүрөттүн үстүнөн анимацияланган текстти кантип көрсөтүү керек

  1. HTML түзүңүз¶ аркылуу сүрөтүңүздү кошуңуз

    тег жана текст. Биринчиден, сиз сүрөтүңүздү колдонуп кошушуңуз керек

    тег.

  2. CSS түзүү¶ Орнотуу:ковер селектор. Hover эффекти элементти тандаган жана стилдештирүүчү:hover псевдоклассынын жардамы менен орнотулат.

Ошондой эле сурашы мүмкүн, сиз hoverди кантип колдоносуз? :hover селектору элементтерди чычкандын үстүнөн тандап алуу үчүн колдонулат.

  1. Кеңеш::hover селекторун шилтемелерде гана эмес, бардык элементтерде колдонсо болот.
  2. Ишара::link селекторду каралбаган барактарга шилтемелерди стилдөө үчүн,:visited селекторун кирген барактарга шилтемелерди стилдөө үчүн жана:active селекторду активдүү шилтемени стилдөө үчүн колдонуңуз.

Бул жерде сиз CSSте сүрөттү кантип алып жүрөсүз?

Жооп: CSS background-image касиетин колдонуңуз

  1. CSS ичинде Hover боюнча сүрөттү өзгөртүү
  2. .карта {
  3. туурасы: 130px;
  4. бийиктиги: 195px;
  5. background: url("images/card-back.jpg") кайталанбайт;
  6. дисплей: inline-block;
  7. }

Мен кантип кутулууга болот?

Hover эффектин өчүрүү үчүн менде эки сунуш бар:

  1. эгер сиздин кыймылдоо эффектиңиз JavaScript тарабынан иштетилсе, жөн гана $ колдонуңуз. unbind('hover');
  2. эгер сиздин курсоруңуздун стили класс тарабынан иштетилсе, анда жөн гана $ колдонуңуз. removeClass('hoverCssClass');

Сунушталууда: