javascript — изображение при наведении мыши

Изображение при наведении мыши

Я пытаюсь переместить изображение при наведении мышью.

Я нашел много ресурсов, но поскольку я использую тему WordPress, я не могу редактировать HTML и, таким образом, пытаюсь использовать псевдоэлементы (хотя это не обязательно) для отображения изображения при наведении курсора. Можно ли перемещать псевдоэлемент при перемещении мыши?

В противном случае есть JS, который я мог бы использовать, чтобы добавить изображение, которое перемещается при наведении курсора мыши?

Я уже использую некоторые JS, чтобы изменить цвет фона всего раздела при наведении, так что, возможно, я мог бы подключиться к этому?

Это URL с аккордеоном «наборов инструментов», где вы можете увидеть мой маленький псевдо-эскиз, хотя я хочу, чтобы он появлялся рядом с мышью и двигался вместе с ним до тех пор, пока пользователь не покинет панель.

ССЫЛКА

Мой JS для переключения цветов, если это помогает:

 $(".colour-switching-section .panel-group .panel:first-child").mouseover(function(){ $(".colour-switching-section").addClass("colour-switch-1"); }); $(".colour-switching-section .panel-group .panel:first-child").mouseleave(function(){ $(".colour-switching-section").removeClass("colour-switch-1"); }); 

И мой CSS

 .colour-switch-1 { background-color: #6B9FD5 !important; transition: background-color ease-in-out .2s; } .colour-switch-1::before { content: ""; width: 100px; background-image: url('https://www.widening-participation.shereewalker.com/wp-content/uploads/2019/10/Contact.png'); background-size: cover; height: 200px; position: absolute; } 
Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector