如何在重叠元素悬停时更改目标元素状态？

Question

我的页面中有以下元素：

<div class="gallery-item" data-width="1" data-height="1">
    <a href="#">
        <div class="gryscl" data-image="gallery1">
            <img src="assets/images/products/1.jpg" id="gallery1" alt="" class="image-responsive-height">
        </div>
        <div class="overlayer bottom-left full-width">
            <div class="overlayer-wrapper item-info ">
                <div class="gradient-grey p-l-20 p-r-20 p-t-20 p-b-5">
                    <div class="">
                        <i class="fa fa-info-circle fs-16" aria-hidden="true"></i>
                    </div>
                    <div class="">
                        <p class="block bold fs-14 p-t-10">Panavision Small AC Bag</p>
                        <h5 class="pull-right semi-bold font-montserrat bold">159,00 €</h5>
                        <div class="clearfix"></div>
                    </div>
                </div>
            </div>
        </div>
    </a>
</div>

图像通过JS与灰度图像交换，只显示悬停时的原始全彩图像。但是，由于div.overlayer中的内容会在悬停时动画以部分覆盖图像，因此图像会过早地返回到灰度级。

即使悬停在div.overlayer及其内容上，我如何确保全彩色图像仍然存在？

以下是创建和交换图像的JS：

<script type="text/javascript">
    $(window).load(function () {
        $("div.gryscl").each(function (index, obj) {
            $("#" + $(obj).attr("data-image")).pixastic("desaturate");
        });

        $("div.gryscl").mouseenter(function (e) {
            var self = document.getElementById($(e.currentTarget).attr("data-image"));
            Pixastic.revert(self);
        });

        $("div.gryscl").mouseleave(function (e) {
            $("#" + $(e.currentTarget).attr("data-image")).pixastic("desaturate");
            console.debug($(e.currentTarget).attr("data-image"));
        });
    });
</script>