Question

我有两张桌子彼此相邻，右边的一张桌子在使用show（）时显示了div的问题。

我该如何防止这种情况？

    $("tr.invoice_head td:last-child a").hover(
        function(){$(".custNotes-span",this).position({
            of: '.custNotes-span',
            my: 'right top',
            at: 'right top',
            offset: '.custNotes-span'
        }).css({
            'z-index':'100',
            'width': '200px',
            'position':'absolute'}).show();},
        function(){$(".custNotes-span").hide();}
    );

更新：JSFiddle链接 - http://jsfiddle.net/r60ywb0L/2/

我很抱歉，这里是JSFiddle的副本，包括使用的JS和CSS。有两个表彼此相邻浮动，当我将tr.custNotes-span悬停在tr.invoice_head的最后一个td内的锚定链接上时，我试图显示在页面的其余部分上

Answer 1

在小提琴中玩耍，我发现：

需要在定位之前应用CSS。
元素在定位时需要在DOM中呈现（但不一定＆＃39;可见＆＃39;）。
of地图的position()属性最好设置为最近的表格行
collision:'fit'似乎比默认collision:'flip'效果更好，但您可能不会注意到除了小提琴之外的差异。
元素可以定位一次。没有必要在每次展示时重新定位它们。

以下解决方法利用CSS visibility来允许正确定位，同时避免使用FOUC。

申请.css（），包括visibility:hidden
＆＃34;显示＆＃34;与.show()（但仍然隐藏）
apply .position（）
隐藏.hide()
制作＆＃34;可见＆＃34;与visibility:visible（但仍然隐藏）

然后可以在悬停处理程序中使用.show()和.hide()显示/隐藏元素。

// As the positioning map and the css map get used in a loop, it's worth assigning them outside the loop.
var maps = {
    css: {
        'z-index': '100',
        'width': '200px',
        'position': 'absolute',
        'visibility': 'hidden'
    },
    pos: {
        'of': null, //added dynamically below
        'my': 'right top',
        'at': 'right top',
        'collision': 'fit'
    }
};

//Apply CSS and pre-position the notes
$(".custNotes-span").each(function() {
    $(this)
        .css(maps.css)
        .show()
        .position( $.extend({}, maps.pos, {'of': $(this).closest("tr")}) )
        .hide()
        .css('visibility','visible');
});

//The maps have done their work and can be deleted from the closure.
delete maps.css;
delete maps.pos;

//Hover actions
$(".custNotes a").hover(function() {
    $(".custNotes-span", this).show();
}, function() {
    $(".custNotes-span", this).hide();
});

选择器被修改为更友好。

<强> DEMO

如何让jQuery show（）留在页面上

1 个答案: