Валентинка в виджете

Здравствуйте, давайте создадим активное сердечко в виджете сайта на wordpress. При наведении курсором мышки на картинку с сердечком – картинка поменяется на другую.

Скачать исходники для статьи можно ниже

Переходим в пункт “Внешний вид”, подпункт “Виджеты”, добавляем виджет “HTML-код” и вставляем в него следующий код:

<a href="#" class="rollover2"> </a>

Далее нам нужно прописать стили для данной ссылки, для этого можно воспользоваться бесплатным wordpress плагином – Simple Custom CSS, сведения о нём:

Количество активных установок: 200000+
Сайт плагина: “ru.wordpress.org/plugins/simple-custom-css/”
Автор плагина: John Regan

После установки и активации плагина в пункте “Внешний вид” появится подпункт “Пользовательский CSS”, в него и вставляем следующий код:

a.rollover2 {
    background: url("https://mnogoblog.ru/wp-content/uploads/2023/02/serdechko8.png"); 
    display: block; 
    width: 250px; 
    height: 250px; 
   }
a.rollover2:hover {
    background: url("https://mnogoblog.ru/wp-content/uploads/2023/02/serdechko9.png"); 
   }