Css при наведении меняется картинка: Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?

 img.thumb {
    должность: родственница;
    верх: 0px;
    фон:#333399;
}
img.thumb:наведение {
    должность: родственница;
    верх: 5 пикселей;
    фон:#00CCCC;
}
 

 a > img.thumb:hover {
должность: родственница;
верх:2px;
}
 

 <дел>

CSS:

 img.thumb {
    должность: родственница;
    верх: 0px;
}
img.thumb: наведение {
    должность: родственница;
    верх: 5 пикселей;
    фон:#00CCCC;
}
 

Надеюсь, это поможет.

Ваш код должен работать, я проверил его здесь: http://cssdesk.com/XcV2D

Некоторые другие стили должны влиять. ..

Зарегистрируйтесь или войдите в систему

Опубликовать как гость

Требуется, но никогда не отображается

Опубликовать как гость

Требуется, но не отображается

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

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

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

Целью главного раздела является немедленное привлечение внимания посетителя и передача наиболее важного сообщения или ценностного предложения веб-сайта. Это возможность для бизнеса произвести сильное первое впечатление.

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

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

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

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

Примечание

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

• Плагин Elementor Pro
• 4 изображения

Создайте новую страницу и отредактируйте ее с помощью Elementor.

Вставьте контейнер со следующими настройками:

• Ширина содержимого: Полная ширина
• Ширина: 100%
• Минимальная высота: 100vh
• Заполнение: 0x

Установите класс для контейнера с именем: «main- container-slide»

Перейдите на панель инструментов WordPress и загрузите 4 изображения, которые вы будете использовать, в медиа-область WordPress.

Вернитесь на страницу и вставьте следующий код CSS в пользовательскую вкладку CSS контейнера:

.main-container-slide [класс * = "слайд"]: наведите {
    background-color: #CE3A3AA1 !важно;
}
.main-контейнер-слайд: имеет (.
 
 slide1: наведение) {
    background-image: url(https://yousite.com/image1.jpg) !важно;
}


.main-контейнер-слайд: имеет (.slide2: наведение) {
    background-image: url(https://yousite.com/image2.jpg) !важно;
}


.main-контейнер-слайд: имеет (.slide3: наведение) {
    background-image: url(https://yousite.com/image3.jpg) !важно;
}


.main-контейнер-слайд: имеет (.slide4: наведение) {
    background-image: url(https://yousite.com/image4.jpg) !важно;
}

Примечание

Замените «https://yousite.com/image.jpg» URL-адресами изображений, которые вы будете использовать в каждой зоне.

Этот CSS выполняет 2 функции:

1 – Изменяет цвет фона при наведении курсора в каждом контейнере

2 – Изменяет фоновое изображение в .main-container-slide при наведении курсора на контейнеры .slide-*.

Взгляните на мой пример (я изменил URL-адреса изображений для недавно загруженных изображений):

Следующий шаг:

На вкладке «Стиль» введите следующие настройки:

• Фон: Обычный
• Тип фона: Классический
• Цвет: Прозрачный
• Изображение: *Выберите первое изображение, которое хотите показать
• Размер изображения: Full 90 038
• Позиция: По центру По центру
• Повтор: Без повтора
• Размер дисплея: Обложка

Следующий шаг:
Добавьте внутрь 1 контейнер со следующими настройками:

• Ширина содержимого: Полная ширина
• Ширина: 25%

Перейдите на вкладку «Дополнительно» и добавьте туда класс с именем: slide1

Теперь спроектируйте каждый контейнер со своим собственным стилем и элементами, как я сделал для этого примера:

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

Следующий шаг:
Когда у вас будет готов первый контейнер, продублируйте его 3 раза и измените класс CSS для каждого контейнера, чтобы он имел 4 последовательно пронумерованных класса:
слайд1, слайд2, слайд3, слайд4

Готово!

В этом уроке мы узнали, как создать главный раздел с помощью Elementor, платформы веб-сайтов №1 для WordPress.

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

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