悬停图像跟随鼠标移动答案

【问题标题】：Hover Image follow mouse on move悬停图像跟随鼠标移动
【发布时间】：2020-02-14 19:20:51
【问题描述】：

我正在尝试用鼠标移动悬停图像。

我找到了很多资源，但是因为我使用的是 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.website.com/wp-content/uploads/2019/10/Contact.png');
        background-size: cover;
        height: 200px;
        position: absolute;
    }

【问题讨论】：

标签： javascript jquery mouseevent pseudo-element

【解决方案1】：

好的，所以最后我让它完美地工作了 - 虽然如果有一个更巧妙的解决方案，那就太好了。

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');
}

$(".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");
});

【讨论】：