鼠标移动显示DIV朝向关闭浏览器选项卡跨平台

Question

当有人试图移动鼠标关闭浏览器选项卡，并在最新的浏览器中跨平台工作时，我的客户希望有一个吸引人的DIV出现。

什么是jQuery技术来检测这种特定类型的鼠标运动？

Answer 1

您需要一些东西来确定用户的操作系统。这可以通过用户代理检测来完成。请看这个问题：How to check website viewer's operating system?

然后，一个选项是将一个固定位置隐藏的div在那个角落和悬停，显示您的div。

Psuedo代码可能看起来像

HTML：

<div id="trigger-div" class="trigger-div"></div>
<div id="annoying-div" class="hidden">PLEASE DON'T LEAVE ME!</div>

CSS：

.hidden {display: none} // may or may not be appropriate. Could use visibility or opacity

.trigger-div {position: fixed; height: 100px; width: 100px; top: 0;}
.trigger-div.windows {right: 0;}
.trigger-div.mac {left: 0;}

Psuedo JS：

jQuery(function () {
    var OS = navigator.platform;

    if (OS === 'MacIntel') {
        jQuery('#trigger-div').addClass('mac');
    } else if (OS === 'Win32') {
        jQuery('#trigger-div').addClass('windows');
    } else {
        // Maybe consider mobile?
        jQuery('#trigger-div').hide();
    }
}

jQuery('#trigger-div').on('hover', function () {
    ('#annoying-div').removeClass('hidden');
});