动画图像光标

问题描述

我试图将动画的.png悬停在一个帖子上时将其作为光标-每个帖子都包含在一个.post类的div中

我以前已经做到了，但是这次我无法使它正常工作，也看不到为什么。鼠标悬停时，该类完全不会应用，并且自定义光标图像也不会显示。

为了使问题简短，我删除了动画CSS。

任何帮助都会很棒。

这是网址-我指的是底部附近的帖子

https://mcgonagallsedinburgh.com/

PHP / HTML：

    <div class="latest-posts contained">    
    
        <div class="post"> post content here </div>
        <div class="post"> post content here </div>
        <div class="post"> post content here </div>


    </div>

CSS：

.latest-posts {
    display: table;
}

.latest-posts .post {
    display: table-cell;
    width: 33.33%;
    position: relative;
}


.donut {
    position: absolute;
    display: none;
    z-index: 100;
    background-image: url('/wp-content/uploads/2020/09/mcgonagalls-donut-01.png');
    background-size: cover;
    width: 80px;
    height: 80px;
}
        


.donut.donut-show {
    display: inline-block;
}

jQuery：

jQuery(".post").mouseover(function(){
  jQuery(".donut").addClass("donut-show");
});


jQuery(".post").mouseleave(function(){
 jQuery(".donut").removeClass("donut-show");
});


var $img = jQuery(".donut");
jQuery('div').mousemove(function(e) {
    jQuery(".donut").offset({
        top: e.pageY - $img.outerHeight(),left: e.pageX - ($img.outerWidth()/2)
    });
});

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）