Изображение при наведении мыши - PullRequest
0 голосов
/ 17 октября 2019

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

Я нашел много ресурсов, но поскольку я использую тему 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;
    }

1 Ответ

0 голосов
/ 18 октября 2019

Ладно, в конце концов, я сделал так, чтобы это работало идеально - хотя, если есть решение с гладкой поверхностью, это было бы замечательно.

HTML

<div class="hover-image">
</div>

CSS

.hover-image {
    width: 300px;
    height: 170px;
    background-size: cover;
}


.hover-image.appear-1 {
    background-image:url('image-url');
}

.hover-image.appear-2 {
    background-image:url('image-url');
}

.hover-image.appear-3 {
    background-image:url('image-url');
}

JS

$(".colour-switching-section .panel-group .panel:first-child").mouseover(function(){
  $(".hover-image").addClass("appear-1");
});


$(".colour-switching-section .panel-group .panel:first-child").mouseleave(function(){
  $(".hover-image").removeClass("appear-1");
});

$(".colour-switching-section .panel-group .panel:nth-child(2)").mouseover(function(){
  $(".hover-image").addClass("appear-2");
});


$(".colour-switching-section .panel-group .panel:nth-child(2)").mouseleave(function(){
  $(".hover-image").removeClass("appear-2");
});

$(".colour-switching-section .panel-group .panel:nth-child(3)").mouseover(function(){
  $(".hover-image").addClass("appear-3");
});


$(".colour-switching-section .panel-group .panel:nth-child(3)").mouseleave(function(){
  $(".hover-image").removeClass("appear-3");
});
...