Question

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

Safari让我很头疼。我无法弄清楚如何让菜单div定位在pdf上。它始终在。永恒的背景iframe方法适用于IE，但是Safari失败了（我已经获得了Windows 5.1.7版）。这是一个大问题。

我绞尽脑汁，浏览网页，想着隐藏PDF文件，考虑退休，把头撞到桌子上......我不知所措！有人必须知道如何处理这个问题。

这是一个简单的例子，可以解释我正在谈论的内容。 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，非常敏感）

在Safari中绝对定位div而不是pdf

1 个答案: