Не получается изменить картинку(кнопку) при наведении на нее курсора в position: fixed

Question

Не получается изменить картинку при наведении на нее курсора. Есть две картинки-кнопки.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; картинки перестали быть видны на сайте. Заранее спасибо за ответ. Включил режим отладки в Хроме и по итогу он выделяет блок в нужном мне месте, но там нет никакой картинки - блок пуст: Кстати, в самом файле html свойство background-image работает. Может проблема в некорректном url. html файл находится отдельно - в папке с другими папками, а уже внутри общей папки находится CSS-папка с CSS, JS-папка с JS и Imades-папка с картинками. Да, 5-часовая проблема из-за некорректного url) Я нашёл ответ по этому адресу Спасибо humster_spb за терпение и "вникаемость" в чужие проблемы

Answer 1

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

.knopka {
    position: fixed;
    right: 40px;
    bottom: 130px;
}

div.knopka {
    background-image: url('https://avatars.mds.yandex.net/get-zen_doc/163385/pub_5b144e7155876b04b08e1f9d_5b14657e5a104ffc196531df/scale_1200');
    background-size: cover;
    width: 48px;
    height: 48px;
}

div.knopka:hover {
    background-image: url('https://avatars.mds.yandex.net/get-zen_doc/164147/pub_5ce7ed349676d700b3066fb7_5ce7ee75cb1ea900b242b36a/scale_1200');
    /* Путь к файлу с заменяемым рисунком */
}

<div class="knopka">
            <a href="#top"> </a>
</div>

БЛОГ НА HUSL

Не получается изменить картинку(кнопку) при наведении на нее курсора в position: fixed

Ответы (1 шт):