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

Как изменить изображение при наведении курсора с помощью Divi

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

Пик Снек

Изменение изображения при наведении курсора — это адаптивный дизайн, поэтому ваши посетители с мобильных устройств или планшетов могут иметь те же впечатления, что и пользователи ПК.

Сменить изображение при наведении

Демо-выбор

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

Затем найдите шаблон Dog Groomers или загрузите его отсюда и импортируйте. Выбрав шаблон из библиотеки, выберите Использовать этот макет .

Создавайте потрясающие сайты

Выбрать изображение

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

Помните, что его можно применить к любому компоненту, в состав которого входит изображение. Модуль изображений Divi — не единственное место, где вы можете увидеть это влияние. Чтобы изменить изображения, включите эффект наведения на любое фоновое изображение, будь то Blurb, CTA или даже фон столбца.

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

Настройки модуля

Откройте слои из нижнего угла и разверните строку из раздела заголовка. Вы увидите два столбца, и теперь откроете настройки второго столбца.

Теперь на вкладке содержимого откройте настройку фона для изображения.

В разделе «Фон» Divi позволяет вам выбирать из множества различных типов мультимедиа, включая изображения, градиенты и видео в формате .mp4. Вкладка Изображение, третья слева, может использоваться для применения эффектов наведения к любому из них.

Включить эффекты наведения

Откройте настройку наведения с помощью значка со стрелкой рядом с подзаголовком «Фон». Это переключатель для эффектов наведения Divi. Эффекты наведения можно применить к любому элементу в Divi Builder, а не только к фотографиям, используя ту же опцию. Рассмотрите это также для будущих дизайнов.

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

Изменить изображение для наведения

Вы можете удалить изображение и заменить изображение. Мы собираемся заменить изображение, используя значок шестеренки .

Теперь выберите изображение, которое вы хотите установить, и нажмите «Загрузить изображение».

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

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

Если все в порядке, нажмите зеленую кнопку «Сохранить». При сохранении может показаться, что ваши фотографии исчезли, но Divi просто возвращает вас к настройкам строки после удаления вас из настроек столбца.

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

Divi не может отображать эффекты наведения в Visual Builder. Это связано с тем, что взаимодействие при наведении курсора используется в других заданиях конструктора. Однако изменения будут видны во внешнем интерфейсе вашего сайта, как только вы нажмете зеленую кнопку Сохранить на странице.

Окончательный вид

Вот как выглядит наш окончательный дизайн.

Заключение

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

html — Как изменить изображение в моей кнопке при наведении?

спросил 1 год, 7 месяцев назад

Изменено 1 год, 7 месяцев назад

Просмотрено 461 раз

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

HTML и CSS

 .btnExample{
   ширина: 60 ​​пикселей;
  высота: 60 ​​пикселей;
  текстовое оформление: нет;
  отображение: встроенный блок;
  контур: нет;
  курсор: указатель;
  стиль границы: 3px #01509f;
  черный цвет;
  цвет фона: #fff;
  радиус границы: 100%;
  поле слева: 20px;
  
  выравнивание текста: по центру;
 
}
. btnПример: наведение {
  цвет фона: #000;
} 

 <кнопка>
    

  
  

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

• HTML
• CSS
• кнопка
• наведение

2

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

 <кнопка>
     
     

 

Дополнительный CSS:

 .hover_img {
    дисплей: нет;
}
. btnExample: наведение .hover_img {
    отображение: встроенный блок;
}
.btnExample: наведение .init_img {
    дисплей: нет;
}
 

В противном случае, я думаю, вы можете использовать JS/jQuery для отображения другого изображения при наведении, поскольку нет возможности показать другое изображение из одного и того же тега img с помощью CSS.

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

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

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

Электронная почта

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

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

Электронная почта

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

Как изменить изображение при наведении курсора с помощью Divi

Эффекты наведения — это одни из самых простых микровзаимодействий, которые пользователь может иметь с сайтом. Тема Divi имеет фантастически простой набор эффектов при наведении, которые вы можете использовать для создания привлекательного UX для каждого человека, который посещает ваш сайт. Одним из наиболее ярких и полезных эффектов в Divi является возможность изменить изображение, когда пользователь наводит на него курсор. От магазинов электронной коммерции до портфолио или даже просто как забавный сюрприз для ваших пользователей, смена изображения при наведении курсора может добавить совершенно новое измерение на ваш сайт. Давайте покопаемся и посмотрим, как легко Divi делает это.

Предварительный просмотр

Рабочий стол

Мобильный

Загрузите Divi Visual Builder

Первое, что нам нужно сделать, это загрузить визуальный конструктор. В этом уроке мы будем использовать в качестве примера пакет макетов Dog Groomers. Вы также можете использовать это с любым макетом, который вы разработали или загрузили.

Загрузите страницу или пакет макетов

Чтобы загрузить пак, при открытии новой страницы в Divi выберите Выберите готовый макет и найдите «Уход за собаками».

Вы также можете найти его, щелкнув фиолетовый значок + в нижней части Divi Builder и сделав то же самое.

Найдите свои изображения

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

Мы хотим отметить, что вы можете использовать это для любого элемента, содержащего изображение . Этот эффект не ограничивается модулем изображения Divi. Итак, используете ли вы Blurb, CTA или даже фон столбца, вы можете включить этот эффект наведения для смены изображений.

Откройте настройки модуля

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

Найти изображение в настройках

После выбора правильных настроек столбца обязательно выберите вкладку Содержание . Прокручивайте, пока не найдете параметры Background .

Под Background Divi дает вам возможность использовать сплошной цвет, градиент, изображение или видео в формате .mp4. И хотя эффекты наведения можно применить к любому из них, мы работаем на вкладке Image , третьей слева.

Включить эффекты наведения

Наведите указатель мыши на слово  Фон (меньший подзаголовок) и найдите  Значок стрелки в появившихся параметрах. Это переключатель для Divi Hover Effects . Эта же опция появится рядом или над любым элементом в Divi Builder, к которому вы можете применить эффект наведения, а не только к изображениям. Так что имейте это в виду и для других дизайнов.

При включении появляются две новые вкладки. Левая вкладка — это базовое изображение, которое появляется без взаимодействия. Это относится и к мобильным устройствам, если не указано иное в  Отзывчивость настроек.

Выберите новое изображение

При перемещении курсора вниз к изображению вам будут предоставлены обычные варианты: для замены изображения или для удаления изображения . Если вы выберете значок корзины, это включит эффект наведения, но изображение исчезнет. Поскольку мы хотим изменить изображение при наведении курсора, а не удалить его, мы собираемся либо щелкнуть само изображение, либо 0084 значок шестеренки .

Выберите изображение при наведении (замена)

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

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

Проверка исходного образа на наличие ошибок

Мы всегда рекомендуем следить за тем, чтобы исходное изображение тоже оставалось прежним. Итак, чтобы проверить, нажмите на левая вкладка и убедитесь, что исходное изображение все еще на месте.

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

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

Обратите внимание, что Divi может не отображать эффект наведения внутри самого Visual Builder. Это связано с тем, что другие задачи используют взаимодействие при наведении внутри конструктора. Но когда вы нажмете зеленую кнопку Сохранить для страницы, изменения отобразятся в интерфейсе вашего сайта.

Окончательные результаты

Если вы выполнили шаги этого руководства, то ваши окончательные результаты должны выглядеть примерно так.

Рабочий стол

Мобильный

Заключение

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