Цель этого руководства — изучить, как изменить изображение при наведении с помощью CSS. Итак, начнем!
Что такое :hover в CSS?
:hover — это элемент псевдокласса, используемый для изменения состояния HTML-элементов при нажатии на него мышью. Этот селектор CSS в основном используется для стилизации или выбора элементов. Однако его нельзя применить к ссылкам.
Синтаксис
Синтаксис :hover приведен ниже:
элемент : парить {
CSS-код. . .
}
Здесь, ' элемент ” относится к элементу, к которому вы хотите применить эффект наведения.
Теперь мы перейдем к практическому примеру изменения изображения при наведении с помощью CSS.
Пример: как изменить изображение при наведении с помощью CSS?
Чтобы сначала изменить изображение при наведении, добавьте два изображения в раздел HTML. Первое изображение для активного состояния, а следующее — для состояния наведения.
Шаг 1: Добавьте изображения
Для указанной цели мы добавим два изображения», изображение1 ' а также ' изображение2 ', и присвойте имя класса второму изображению как ' hover_img ».
HTML
< тело >< див учебный класс знак равно 'изображение' >
< изображение источник знак равно 'image1.png' >
< изображение источник знак равно 'image2.png' учебный класс знак равно 'hover_img' >
< / див >
< / тело >
Шаг 2: Стиль изображений
Теперь перейдите к CSS, чтобы установить положение обоих изображений, используя « должность ' имущество. Мы установим его положение как « абсолютный », чтобы позиционировать его абсолютно по отношению к его ближайшему родителю.
CSS
.img {должность : абсолютный ;
}
Это покажет следующий результат:
На следующем шаге мы поместим второе изображение перед первым. Для этого мы установим положение изображения как « абсолютный ” и установите верхнее и левое положение как “ 0 ». С помощью этого изображение помещается перед первым изображением, но мы хотим отображать второе изображение при наведении на него курсора мыши. Таким образом, установка отображаемого значения как « никто ” покажет желаемый результат:
.hover_img {должность : абсолютный ;
Топ : 0 ;
оставил : 0 ;
отображать : никто ;
}
Вывод данного кода выглядит следующим образом:
Второе изображение успешно скрыто за первым изображением.
Теперь перейдите к следующему шагу.
Шаг 3: Измените изображение при наведении
Далее используйте « :наведите ' и выберите ' .img », чтобы применить наведение к выбранному элементу. Затем назначьте имя класса второго изображения « .hover_img ». После этого внутри круглых скобок установите значение свойства display как « в соответствии », что заставит элемент разместиться в одной строке:
.img : парить .hover_img {отображать : в соответствии ;
}
Вот результат, демонстрирующий изменение изображения при наведении на него курсора:
Приведенный выше вывод показывает, что мы успешно изменили изображение при наведении с помощью CSS.
Вывод
Изображение можно изменить при наведении с помощью кнопки « :наведите элемент псевдокласса. Для этого добавьте нужные изображения в HTML-файл, установите их в одинаковое положение с помощью CSS и примените к ним селектор :hover. В результате первое изображение изменится при наведении на него курсора. В этой статье мы объяснили, как изменить изображение при наведении, используя :hover, на практическом примере.