Question

我希望通过将鼠标悬停在其父级上来显示div。代码很大，所以我试着解释一下。在网站上有一个可滚动的div（overflow：auto），它显示了一个表格。 - ＆GT;它显示了10行表格，其余的（近30个）必须滚动。

在我的表的每个tr中都有一个div（hover_over），它有一个child-div（show_by_hower）通过将鼠标悬停在div（hover_over）上，应显示child-div（show_by_hower）。到目前为止，但是child-div（show_by_hower）始终位于滚动div之下。如果我从可滚动的div中删除overflow:auto;，它一切正常，但我需要自动溢出。

#hover_over 
{
     position:relative;
     width:20px;height:20px;
}

#hover_over:hover div
{
     position:absolute;
     display:block;
     z-index:999;
     width:310px;
     height:125px;
}

#hover_over div { display:none; }

代码中没有其他定位。

Answer 1

以下a jsFiddle有一个可能的解决方案。我正在使用jQuery的.hover()方法为表外的元素设置动画，并用表中包含的内容填充它。这样，弹出元素不限于表格的边界。

这是jQuery代码：

$(function() {
    $(".hover_over").hover( function() {
        hovDiv = $(this);
        showDiv = $(".show_hover");
        showDiv.html(hovDiv.children("div").html());
        showDiv.css("top", hovDiv.offset().top)
        showDiv.css("left", hovDiv.offset().left + hovDiv.width()).show();
    }, function() {
        $(".show_hover").hide();
    });
});

HTML：

<div class="theTable">
    <div class="hover_over">1
        <div>I'm hidden! 1</div>
    </div>
    <div class="hover_over">2
        <div>I'm hidden! 2</div>
    </div>
    <div class="hover_over">3
        <div>I'm hidden! 3</div>
    </div>
    <div class="hover_over">4
        <div>I'm hidden! 4</div>
    </div>
    <div class="hover_over">5
        <div>I'm hidden! 5</div>
    </div>
</div>
<div class="show_hover"></div>

CSS：

.show_hover {
   display:none;
   position:absolute;
   background-color:black;
   width:100px;
   height:20px;
   font-size:14px;
   color:white;
}

.hover_over div { display:none; }

更新

因为你问过，我决定用普通的javascript来完成这项工作。它不是那么容易阅读，但同样的想法也适用：将弹出式div移到表格之外，并使用onmouseover和onmouseout事件处理程序动态添加所需内容和定位。

Here is the new jsFiddle

以下是相关代码：

<强>的Javascript

(function() {
    function hoverIn() {
        var hovDiv = this;
        var showDiv = document.getElementById("show_hover");
        showDiv.innerHTML = hovDiv.children[0].innerHTML;
        showDiv.className = "see";
        var newTop = hovDiv.offsetTop + hovDiv.offsetParent.offsetTop +  hovDiv.offsetParent.offsetParent.offsetTop;
        showDiv.style.top = "" + newTop + "px";
        var newLeft = hovDiv.offsetLeft + hovDiv.offsetParent.offsetLeft +    hovDiv.offsetParent.offsetParent.offsetLeft + hovDiv.clientWidth;
        showDiv.style.left = "" + newLeft + "px";
    };

    function hoverOut() {
        document.getElementById("show_hover").className = "";
    };

    var hoverDivs = document.getElementsByClassName("hoverdiv");
    for(var i = 0; i < hoverDivs.length; i++)
    {
      hoverDivs[i].onmouseover = hoverIn;
      hoverDivs[i].onmouseout = hoverOut;
    }

})();

<强> CSS

#show_hover
{
    display:none;
    position:absolute;
    top:0;
    left:0;
}

#show_hover.see {
    display:block;   
    background-color:green;
    width:400px;
    height:80px;
    position:absolute;
    top:20px;
    left:20px;
}

更新2

这个答案变得非常漫长。 Here's the new jsFiddle。此更新允许您将鼠标悬停在显示的div上以与内部对象进行交互。我利用了hoverIntent jQuery插件背后的基本思想，即将onmouseout处理程序置于setTimeout调用之后，允许你半秒钟将鼠标移动到弹出窗口中它消失了。这有点烦躁，所以你可以玩等待时间，直到你做你想要的。

此外，如果您只想检查鼠标在任何给定时刻的位置并触发显示/隐藏行为，请参阅this StackOverflow question。

那就是说，这是更新的重要部分：

    var mouseInShowHover = false;
    var showDiv = document.getElementById("show_hover");

    showDiv.onmouseover = function() { mouseInShowHover = true; }

    showDiv.onmouseout = function() {
        mouseInShowHover = false;
        showDiv.className = "";
    }

    function hoverOut() {
        setTimeout( function() {
            if( !mouseInShowHover )
               showDiv.className = "";
        }, 500);
    };

Answer 2

好吧，你的JSFiddle示例对我来说很好，所以我假设你正在使用IE8或者有非常严格的z-index规则的东西。

尝试添加此内容：

#divscroll tr:hover {
    position:relative;
    z-index:1;
}

JSFiddle example

在悬停上显示DIV - 溢出自动

2 个答案:

更新

更新2