Я пытаюсь переместить наведенное изображение с помощью мыши.
Я нашел много ресурсов, но поскольку я использую тему Wordpress, я не могу редактировать HTML и, таким образом, пытаюсь использовать псевдоэлементы(хотя это не обязательно) для отображения изображения при наведении. Можно ли перемещать псевдоэлемент при перемещении мыши?
В противном случае есть JS, который я мог бы использовать для добавления изображения, которое перемещается при наведении курсора мыши?
Я уже использую некоторыеJS, чтобы изменить цвет фона всего раздела при наведении, поэтому, возможно, я мог бы подключиться к этому?
Это URL с аккордеоном «наборов инструментов», где вы можете увидеть мой маленький псевдо-эскиз, хотя я хочуон появляется рядом с мышью и двигается вместе с ним до тех пор, пока пользователь не покинет панель.
LINK
Мои 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;
}