html — Смена картинки при наведении
Вопрос задан
Изменён 6 лет 2 месяца назад
Просмотрен 9k раз
Подскажите пожалуйста, в чем ошибка? Не могу понять,что делаю не так в простом действии — необходимо,чтобы картинка изменялась при наведении курсора.
.izo { display: inline-block;} a.izo:hover { background: url("other_pic.png") no-repeat 50% 50%;}
<a href="/add/"><img src="/pic.png"></a>
- html
- css
- Тегу
img
нельзя применить свойствоbackground
! - У тега
img
уже по-умолчанию заданоdisplay: inline-block;
Можно применить смену фоновых изображений к ссылке.
Как один из возможных вариантов:
a { display: inline-block; } img { transition: all .3s ease; } a:hover img { opacity: 0; } a:hover { background: url("http://wpguru.co.uk/wp-content/uploads/2013/09/CSS-Logo-214x300.png") no-repeat 50% 50%; }
<a href="/add/"> <img src="https://www.w3.org/html/logo/downloads/HTML5_Logo_256.png"> </a>
1
Вы картинку на HTML добавляете через img src
, а пытаетесь изменить свойство background
в CSS
Вам нужно картинку добавлять с помощью CSS
в класс izo
.izo { display: inline-block; background: url("pic.png") no-repeat 50% 50%;} } a.izo:hover { background: url("other_pic.png") no-repeat 50% 50%; }2
Зарегистрируйтесь или войдите
Регистрация через Google
Регистрация через Facebook
Регистрация через почту
Отправить без регистрации
Почта
Необходима, но никому не показывается
Отправить без регистрации
Почта
Необходима, но никому не показывается
Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки
Как менять картинку при наведении курсора мыши — Вопрос от Gicu Harea
- Вопросы
- Горячие
- Пользователи
- Вход/Регистрация
>
Категории вопросов
Задать вопрос +
Основное
- Вопросы новичков (16495)
- Платные услуги (2125)
- Вопросы по uKit (82)
Контент-модули
- Интернет-магазин (1432)
- Редактор страниц (236)
- Новости сайта (498)
- Каталоги (806)
- Блог (дневник) (112)
- Объявления (295)
- Фотоальбомы (433)
- Видео (255)
- Тесты (60)
- Форум (576)
Продвижение сайта
- Монетизация сайта (220)
- Раскрутка сайта (2455)
Управление сайтом
- Работа с аккаунтом (5316)
- Поиск по сайту (426)
- Меню сайта (1765)
- Домен для сайта (1532)
- Дизайн сайта (13466)
- Безопасность сайта (1478)
- Доп.
Доп. модули
- SEO-модуль (225)
- Опросы (63)
- Гостевая книга (99)
- Пользователи (432)
- Почтовые формы (318)
- Статистика сайта (197)
- Соц. постинг (212)
Вебмастеру
- JavaScript и пр. (644)
- PHP и API на uCoz (235)
- SMS сервисы (10)
- Вопросы по Narod. ru (427)
- Софт для вебмастера (39)
- Вопросы
- Дизайн сайта
- Как менять картинку при…
голоса: +2
Лучший ответ
Прочитайте http://htmlbook. ru/faq/kak-sdelat-chtoby-kartinka-menyalas-pri-navedenii-na-nee или уточните вопрос
Вот примеры смены картинок при наведении с различными эффектами http://shpargalkablog.ru/2012/01/pri-navedenii-na-kartinku-ona.html
| Автор: webanet
Выбор ответа лучшим |
…
Как изменить изображение при наведении с помощью CSS?
Улучшить статью
Сохранить статью
- Уровень сложности: Средний
- Последнее обновление: 26 ноя, 2020
Улучшить статью
Сохранить статью
Подход, описанный в этой статье, заключается в изменении изображения, когда пользователь наводит на него указатель мыши. Эту задачу можно легко выполнить, используя свойство CSS background-imag e в сочетании с: hover псевдокласс для замены или изменения изображения при наведении курсора.
Example:
|
Выход:
Перед наведением мыши над изображением:
после падения мыши.
Статьи по теме
Что нового
CSSКак создать эффект наложения изображения при наведении?
Как создать эффекты наложения изображения при наведении с помощью CSS?
Как создать эффекты наложения изображения при наведении с помощью CSS?
Обзор
В изображении эффектов наведения CSS мы добавим другое изображение к основному изображению, чтобы другое изображение можно было увидеть, размывая основное изображение при наведении на него курсора. Мы достигнем этого, используя 5 различных типов эффектов наведения.
- Исчезновение
- Скользящая крышка
- Нижний слайд
- Слайд влево
- Слайд вправо
Предварительные требования
Изучение основ CSS
Изучение основ HTML
Как создать эффект наложения изображения при наведении с помощью CSS?
Когда пользователь наводит курсор на элемент в CSS, этот элемент реагирует, запуская эффекты перехода. Это эффективный подход к улучшению взаимодействия с пользователем, который используется для выделения важных элементов на веб-странице. Эффект наложения изображения при наведении добавляет другой эффект или изображение поверх основного изображения. Эффект наложения CSS можно создать, используя следующее:
- Он будет состоять из двух разделов, один из которых будет наложенным и будет содержать изображение, которое будет отображаться при наведении курсора на изображение.
- Другой будет контейнером, который будет содержать как оверлей, так и изображение.
Давайте создадим базовый HTML-код, содержащий изображение.
<голова> <мета-кодировка="UTF-8">Масштабирование изображения при наведении курсора <тело> <центр>
Вывод:
Типы эффектов при наведении в CSS
Fade
В эффекте Fade , когда мы наводим курсор на изображение, наложение появляется в верхней части изображения. Здесь мы устанавливаем ширину и высоту изображения, затем мы регулируем высоту разделения контейнера, чтобы относительно второго контейнера div был эффект наложения, который создает эффект наведения на базовое изображение.
Пример Fade эффект:
<голова> <мета-кодировка="UTF-8">Наложение изображения <стиль> .контейнер { положение: родственник; ширина: 250 пикселей; высота: 250 пикселей; отображение: встроенный блок; } .изображение { дисплей: блок; ширина: 250 пикселей; высота: 250 пикселей; } .оверлей { положение: абсолютное; переход: все .3s легкость; непрозрачность: 0; цвет фона: #eee; } .container: наведение .overlay { непрозрачность: 1; } .эффект наложения { ширина: 250 пикселей; высота: 250 пикселей; верх:0; слева: 0; цвет фона: #00b1ba; } <тело> <дел> <дел>