Не получается изменить картинку при наведении на нее курсора. Есть две картинки-кнопки.png надо, чтобы одна заменила другую при наведении на неё мыши.
Важный момент кнопка находится в
position: fixed;
Пытался решить проблему с помощью этого сайта
Пробовал объединять картинки с использованием объединённого изображения
.knopka {
position: fixed;
right: 40px;
bottom: 130px;
}
img.knopka {
display: block;
/* Ширина рисунка в пикселах */
width: 48px;
/* Высота рисунка в пикселах */
height: 48px;
}
img.knopka:hover {
background-position: 0 48px;
/* Смещение фона */
}
<div class="knopka">
<a href="#top"> <img src="Images/upItog.png" width="48"> </a>
</div>
По итогу этого способа изначально на странице видны сразу 2 изображения, вместо одного. При наведении - ничего не меняется.
Пробовал исходную картинку сделать фоном элемента div с помощью свойства background. А при наведении на картинку курсора менять фоновую картинку с помощью псевдокласса hover(здесь я использовал два изображения):
.knopka {
position: fixed;
right: 40px;
bottom: 130px;
}
div.knopka {
background: url(Images/up.png);
/* Путь к файлу с исходным рисунком */
width: 48px;
/* Ширина рисунка */
}
div.knopka:hover {
background: url(Images/upAct.png);
/* Путь к файлу с заменяемым рисунком */
}
<div class="knopka">
<a href="#top"> </a>
</div>
opacity:0;
или opacity:1;
картинки перестали быть видны на сайте. Заранее спасибо за ответ.
Включил режим отладки в Хроме и по итогу он выделяет блок в нужном мне месте, но там нет никакой картинки - блок пуст: 