Смена картинки при наведении
Подскажите пожалуйста, в чем ошибка? Не могу понять,что делаю не так в простом действии — необходимо,чтобы картинка изменялась при наведении курсора.
.izo < display: inline-block;>a.izo:hover
Отслеживать
3,606 4 4 золотых знака 21 21 серебряный знак 43 43 бронзовых знака
задан 18 ноя 2016 в 10:30
541 1 1 золотой знак 5 5 серебряных знаков 21 21 бронзовый знак
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
- Тегу 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%; >Отслеживать
ответ дан 18 ноя 2016 в 10:32
22.4k 10 10 золотых знаков 56 56 серебряных знаков 119 119 бронзовых знаков
ого,вот это провал. Каким образом тогда лучше это сделать?
18 ноя 2016 в 10:33
Вы картинку на HTML добавляете через img src , а пытаетесь изменить свойство background в CSS
Вам нужно картинку добавлять с помощью CSS в класс izo
.izo < display: inline-block; background: url("pic.png") no-repeat 50% 50%;>> a.izo:hover
Отслеживать
ответ дан 18 ноя 2016 в 10:33
3,606 4 4 золотых знака 21 21 серебряный знак 43 43 бронзовых знака
18 ноя 2016 в 10:36
@Alla, Elena Semenchenko написала как нужно сделать, опередила)
18 ноя 2016 в 10:47
- html
- css
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Курсор
The cursor CSS property specifies the mouse cursor displayed when the mouse pointer is over an element.
| Начальное значение | auto |
|---|---|
| Применяется к | все элементы |
| Наследуется | да |
| Обработка значения | как указано, но с абсолютными значениями url |
| Animation type | discrete |
Синтаксис
/* Применение ключевых значений */ cursor: pointer; cursor: auto; /* Использование URL и координат */ cursor: url(cursor1.png) 4 12, auto; cursor: url(cursor2.png) 2 2, pointer; /* Глобальные значения */ cursor: inherit; cursor: initial; cursor: unset;
Значения
Ссылка или разделённый запятыми список ссылок: url(…), url(…), … , указывающие на файл изображения. Дополнительные ссылки могут быть предоставлены в качестве запасных значений, на случай если изображение по основной ссылке не поддерживается в качестве курсора. Запасное значение, не являющееся ссылкой (одно или несколько ключевых слов) должно находиться в конце списка значений. See Using URL values for the cursor property for more details.
Необязательные значения х- и у- координат. Два безразмерных неотрицательных числа меньше 32.
Наведите курсор на картинку, чтобы увидеть пример в действии:
Указывает на возможность перемещения объекта.
Приближение или уменьшение.
Указывает на возможность схватить и переместить объект.
Формальный синтаксис
cursor =
[ (en-US) [ (en-US) | (en-US) ] (en-US) [ (en-US) ] (en-US) ? (en-US) ] (en-US) # (en-US) ? (en-US) [ (en-US) auto | (en-US) default | (en-US) none | (en-US) context-menu | (en-US) help | (en-US) pointer | (en-US) progress | (en-US) wait | (en-US) cell | (en-US) crosshair | (en-US) text | (en-US) vertical-text | (en-US) alias | (en-US) copy | (en-US) move | (en-US) no-drop | (en-US) not-allowed | (en-US) grab | (en-US) grabbing | (en-US) e-resize | (en-US) n-resize | (en-US) ne-resize | (en-US) nw-resize | (en-US) s-resize | (en-US) se-resize | (en-US) sw-resize | (en-US) w-resize | (en-US) ew-resize | (en-US) ns-resize | (en-US) nesw-resize | (en-US) nwse-resize | (en-US) col-resize | (en-US) row-resize | (en-US) all-scroll | (en-US) zoom-in | (en-US) zoom-out ] (en-US)
=
| (en-US)
=
url( (en-US) * (en-US) ) | (en-US)
=
src( (en-US) * (en-US) )
Примеры
.foo cursor: crosshair; > /* use prefixed-value if "zoom-in" isn't supported */ .bar cursor: -webkit-zoom-in; cursor: zoom-in; > /* standard cursor value as fallback for url() must be provided (doesn't work without) */ .baz cursor: url(hyper.cur), auto; >
Спецификации
| Specification |
|---|
| CSS Basic User Interface Module Level 4 # cursor |
Совместимость с браузерами
BCD tables only load in the browser
Смотрите также
- Using URL values for the cursor property
- pointer-events
- Cursor Property (MSDN)
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 7 авг. 2023 г. by MDN contributors.
Your blueprint for a better internet.
изменение цвета svg при наведении
Столкнулся с проблемой, связанной с изменением цвета иконок svg. Придерживался этой инструкции. Есть спрайт svg и отдельный стилевой файл для него:
.icon < display: inline-block; width: 1em; height: 1em; fill: currentColor; >.icon-youtube < font-size:(13/10)*1rem; width:(15/13)*1em; >Подключаю на html через use :
оба варианта ниже не работают
.icon-youtube svg:hover < color: red; fill: red; >.icon-youtube:hover
Проблема заключается в изменении цвета при наведении на иконку. Пробовал и fill , и color . Ничего не работает.
Ресурс 3 - html
- css
- svg
- svg-спрайт
