防止在滑动器手柄处于活动状态时div消失

Question

我不知道标题是否真正清晰，但是我需要防止当前代码在激活滑块手柄（或按下鼠标时）时自动隐藏div。

Javascript

从Arun P Johny中的this post.提取的代码

//trigger the div to appear when mouse enter a specific div class
$(".transparency-open").on({
    mouseenter: function () {
        $($(this).next(".layer-option")).show();
    },
    //Delay the fading of the appeared div
    mouseleave: function () {
        var $target = $(this).next(".layer-option");
        var timer = setTimeout(function () {
            $target.stop(true, true).hide();
        }, 10);
        $target.data('hoverTimer', timer);
    }
});
//Keep the div shown when mouse enters the div containing the layer option div
$(".layer-option").on({
    mouseenter: function () {
        clearTimeout($(this).data('hoverTimer'));
        $(this).stop(true, true).show();
    },
    mouseleave: function () {
        $(this).stop(true, true).hide();
    }
});

HTML

<div id="layer-basemap" class="layer-legend-titles">
    <div id="display-basemap" class="layer-legend-checkbox legend-basemap active">
        <div class="checkbox-symbol"></div>
        <div class="checkbox-label">Basemap</div>
        <div class="transparency-open">></div>
        <div id="option-basemap" class="layer-option undisplayed">
            <div class="opaslider"></div>
        </div>
    </div>
</div>

如果用户正在使用滑块，我想防止layer-option div隐藏。目前，只要鼠标离开div，它就会消失。

我不想在div关闭之前有一个延迟。我试图声明一个表示鼠标是否按下的变量，但是我没有运气。 我的猜测是，我应该尝试使用滑块手柄，看看它是否处于活动状态，但是我不知道该如何处理。