0

親にカーソルを合わせてdivを表示したいと思います。コードがかなり大きいので、説明しようと思います。このサイトには、テーブルを表示するスクロール可能なdiv（overflow：auto）があります。->テーブルの10行が表示され、残り（30行近く）はスクロールする必要があります。

私のテーブルのすべてのtrには、子div（show_by_hower）を持つdiv（hover_over）があります。div（hover_over）にカーソルを合わせると、子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; }

コードには他の位置付けはありません。

4

2 に答える 2

1

これが1つの可能な解決策を備えた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イベントハンドラーを使用して配置します。

これが新しい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

この答えはめちゃくちゃ長くなっています。これが新しいjsFiddleです。この更新により、表示されているdivにカーソルを合わせて、内部のオブジェクトを操作できます。hoverIntent jQueryプラグインの背後にある基本的な考え方を利用しました。これはonmouseout、呼び出しの背後にハンドラーを配置setTimeoutして、マウスがポップアップが消える前に0.5秒移動できるようにすることです。それは少し気難しいので、あなたはそれがあなたが望むことをするまで待ち時間で遊ぶかもしれません。

また、マウスが特定の瞬間にどこにあるかを確認し、それから表示/非表示の動作をトリガーする場合は、このStackOverflowの質問を参照してください。

そうは言っても、アップデートの重要な部分は次のとおりです。

    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);
    };
于 2013-03-01T16:00:48.273 に答える
0

JSFiddleの例は私にとってはうまく機能したので、IE8または非常に厳密なz-indexルールを持つものを使用していると思います。

これを追加してみてください：

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

JSFiddleの例。

于 2013-03-01T16:48:49.397 に答える