Question

我的问题：

我要求在悬停html元素时显示弹出窗口。这个实现的非常重要的一部分是，即使在弹出窗口本身悬停时，弹出窗口也应该可见。

试图实施：

对我来说，弹出窗口显示在目标元素的悬停上。它也显示在弹出窗口的悬停。但问题是，如果它刚好靠近目标元素，我只能在弹出窗口中显示弹出窗口。但是如果我希望悬停弹出窗口与目标元素的距离稍微远一点，那么当我将光标移动到它时，弹出窗口就会消失。任何机构都实施了这个场景吗？

我正在使用jQuery。以下代码可以参考：

//Catching the mouse over event and showing the hover popup.
    $("div[id^=RestInformationHolder_div] > a").hover(
        function() {
            var control = this.id;
            var POP = this.parentNode.parentNode;
            var assetType=$("#" + POP.id).attr('_assetType');
            fillPopupContent(control, assetType);
            positionDivToTarget(this);
            showElement("restRowAnchorPopup");
        },
        function() {
            $("#restRowAnchorPopup").hover(
                function() {
                    showElement("restRowAnchorPopup");//"restRowAnchorPopup" is the popup div id.
                },
                function() {
                    hideElement("restRowAnchorPopup");
                }
            );
            hideElement("restRowAnchorPopup");
        }
    );
}

function fillPopupContent(targetElementId, assetType) {
    //Fill the content in the popup div.
}

function positionDivToTarget(targetElement) {
    var posArray = getPositionToBody(targetElement);
    var offsetLeft = posArray[0] + targetElement.offsetWidth * 1 / 3;
    var offsetTop = posArray[1] + targetElement.offsetHeight;

    $("#restRowAnchorPopup").css({ "top": offsetTop, "left": offsetLeft });
}

function showElement(elementId) {
    $("#" + elementId).css("display", "block");
}

function hideElement(elementId) {
    $("#" + elementId).css("display", "none");    
}

function getPositionToBody(targetHtmlElement) {
//Returns the relative position of the target element.
}

感谢任何帮助。

先谢谢。 Subrat。

Answer 1

目前太懒了为你编码，但主要想法是

用户悬停您的RestInformationHolder_div元素
显示restRowAnchorPopup
用户离开RestInformationHolder_div元素 - ＆gt; mouseout开火
启动计时器，timerid = setTimeout(hidesPopup(), 1000)更改时间适合您
如果用户在计时器用完之前悬停弹出窗口cancelTimeout(timerid)
Else hidesPopup()正在运行并隐藏弹出窗口

你当然可以稍微调整一下这一点，让hidesPopup()以“缓慢”的不透明度淡出逐渐隐藏弹出窗口，如果用户在隐藏时移动你停止动画并设置不透明度。

Demopage：http://jsbin.com/apaxa

demopage的代码视图http://jsbin.com/apaxa/edit

Answer 2

不是直接答案，但你可以减少这两个功能：

function showElement(elementId) {
  $("#" + elementId).css("display", "block");
}

function hideElement(elementId) {
  $("#" + elementId).css("display", "none");    
}

//just call
$('#elementId').show();

$('#elementId').hide();

悬停时的PopUp窗口

2 个答案: