如何用jQuery data属性实现鼠标离开时触发指定弹窗（附现有代码）

嘿，我来帮你搞定这个需求！你的现有代码已经通过data属性实现了点击打开/关闭弹窗的功能，现在要扩展成鼠标离开时触发指定弹窗的操作，完全可以沿用这套data属性机制，只需要在initPopup()函数里新增针对mouseleave事件的处理逻辑就行。

修改后的完整代码 #

function initPopup() {
    // ----- OPEN 点击打开弹窗
    $('[data-popup-open]').on('click', function (e) {
        var targeted_popup_class = jQuery(this).attr('data-popup-open');
        $('[data-popup="' + targeted_popup_class + '"]').fadeIn(350);
        e.preventDefault();
    });

    // ----- CLOSE 点击关闭弹窗
    $('[data-popup-close]').on('click', function (e) {
        var targeted_popup_class = jQuery(this).attr('data-popup-close');
        $('[data-popup="' + targeted_popup_class + '"]').fadeOut(350);
        e.preventDefault();
    });

    // ----- TRIGGER ON MOUSE LEAVE 鼠标离开触发弹窗操作
    $('[data-popup-leave]').on('mouseleave', function (e) {
        var targeted_popup_class = jQuery(this).attr('data-popup-leave');
        // 这里默认是关闭弹窗，若需要打开弹窗，把fadeOut改成fadeIn即可
        $('[data-popup="' + targeted_popup_class + '"]').fadeOut(350);
        e.preventDefault();
    });
}

$(document).ready(function () {
    initPopup();
});

使用说明 #

• 如果你想让鼠标离开某个元素时关闭指定弹窗，给该元素添加属性：data-popup-leave="你的弹窗标识"，示例代码如下：

  <div data-popup-leave="login-popup">鼠标离开我就关闭登录弹窗</div>
  <div data-popup="login-popup" style="display:none;">这是登录弹窗</div>
  

• 如果需要鼠标离开时打开弹窗，只需要把代码中mouseleave事件里的fadeOut(350)替换成fadeIn(350)就可以了。

内容的提问来源于stack exchange，提问作者TuJ