jquery - 在 Safari 中绝对定位 div 在 pdf 上

Question

我目前正在开发一个自定义 jquery 菜单，偶尔需要将鼠标悬停在 pdf 上(嵌入在 iframe 中)。它由绝对定位的 div 组成，这些 div 在单击/悬停其父级时显示。很简单。

Safari 让我头疼。我不知道如何让菜单 div 定位在 pdf 上。它总是在下面。永恒的背景 iframe 方法非常适合 IE，但不适用于 Safari(我有 Windows 5.1.7 版)。这是个大问题。

我绞尽脑汁，翻遍了网络，想过把pdf藏起来，想过退休，把头撞在 table 上……不知所措!有人必须知道如何处理这件事。

这是一个简化的示例，它可以完成我正在谈论的事情。 http://jsfiddle.net/5WPa2/1/

HTML

<div id="divHover">try me</div>
<div id="divHoverChild">hello</div>
<iframe id="ifBG" src="about:blank"></iframe>
<iframe id="ifPDF" src="http://bitcoin.org/bitcoin.pdf"></iframe>

CSS

#divHoverChild, #ifBG {
    position: absolute;
    top:25px;
    left: 10px;
    display: none;
    width: 150px;
    height: 300px;
}

#divHoverChild {
    background: #ccc;
    padding: 25px;
    z-index: 1000;
}

#ifBG {
    z-index: 1;
    border:none;
}

#ifPDF {
    width: 400px;
    height: 400px;
}

JS

$().ready(function () {
    var $child = $("#divHoverChild");
    var $ifBG = $("#ifBG");

    $("#divHover").mouseover(function () {
        $child.slideDown();
        $ifBG.slideDown();
    });

    $child.mouseout(function () {
        $child.slideUp();
        $ifBG.slideUp();
    });
});

Answer 1

这是正确的语法:

$().ready(function () {
    var $child = $("#divHoverChild");
    var $ifBG = $("#ifBG");

    $("#divHover").mouseover(function () {
        $child.slideDown();
        $ifBG.slideDown();
    });
    $("#divHoverChild").mouseout(function () {
        $child.slideUp();
        $ifBG.slideUp();
    });
});

你看，当你弹出 divHoverChild 时它会溢出 divHover，所以当你将鼠标向下移出 divHover 区域时，你的 jquery 触发了 divHover 元素上的 mouseout 事件，然后它向上滑动

无论如何，我不推荐使用 jQuery 函数，您可以使用 css 和 html 来管理它。有一个非常好的 css/html 菜单结构示例，具有所有转换和其他效果。 http://cssmenumaker.com/builder/1992017 . (尝试使用 iframe， react 灵敏)