CSS Z-Index：如何在父母的兄弟姐妹上面显示元素？ （和表兄弟一样）

Question

我有这个项目：http://jsfiddle.net/dmzq1938/3/。生成的东西有点乱，但无论如何它都是我感兴趣的悬停元素。

在小提琴中，如果将鼠标悬停在顶行中的蓝色/绿色/灰色矩形之一上，则可以看到问题所在。但如果你将鼠标悬停在底行的一个上，你可以看到应该的样子。

我理解整个Z-Index依赖于它的父母与它的兄弟姐妹的关系，我已经尝试过这样做，以便在悬停时它使整个行成为z-index高于其他行，但问题就变成了你可以拥有单击一下，同时将鼠标悬停在另一个上，这样就会有一行重叠。

我想要的是能够点击和/或将鼠标悬停在方框上，工具提示气泡显示在所有方框的顶部。理想情况下，无需将所有工具提示放在与整行相同的级别上！

为了完整起见：

JS

$(document).on('click', '.routetimeline .bars > div.stop, .routetimeline .bars > div.driving, .routetimeline .bars > div.break', function () {
    var AllDivs = $('.routetimeline .bars > div');
    AllDivs.removeClass('selected');
    var AllBalloons = $('.routetimeline .bars div.balloon');
    AllBalloons.hide();
    AllBalloons.css('box-shadow', '0');
    var ThisDiv = $(this);
    var ThisBar = ThisDiv.parent();
    var ThisBalloon = ThisDiv.next('.balloon');
    if (ThisDiv.hasClass('selected')) {
        ThisDiv.css('z-index', 'auto');
        ThisDiv.removeClass('selected');
        ThisBalloon.hide();
        ThisBalloon.css('box-shadow', '0');
    } else {
        ThisDiv.css('z-index', '100');
        ThisDiv.addClass('selected');
        ThisBalloon.show();
        ThisBalloon.css('box-shadow', '1px 1px 2px 1px #7A7A7A');
    }
});
$(document).on('mouseenter', '.routetimeline .bars > div.stop, .routetimeline .bars > div.driving, .routetimeline .bars > div.break', function () {
    var ThisDiv = $(this);
    if (!ThisDiv.hasClass('selected')) {
        ThisDiv.css('z-index', '100');
        var ThisBalloon = ThisDiv.next('.balloon');
        ThisBalloon.show();
        ThisBalloon.css('box-shadow', '1px 1px 2px 1px #7A7A7A');
    }
});
$(document).on('mouseleave', '.routetimeline .bars > div.stop, .routetimeline .bars > div.driving, .routetimeline .bars > div.break', function () {
    var ThisDiv = $(this);
    if (!ThisDiv.hasClass('selected')) {
        ThisDiv.css('z-index', 'auto');
        var ThisBalloon = ThisDiv.next('.balloon');
        ThisBalloon.hide();
        ThisBalloon.css('box-shadow', '0');
    }
});

我很清楚我可能会要求不可能的，因为逻辑上它是。考虑所有“开箱即用”的尝试！

Answer 1

http://jsfiddle.net/deannorth/naLLwqjk/1/

JS

ThisDiv.closest('.row').css('z-index', '2');

CSS

.row{
    z-index:1;
    position:relative;
}

这与你所追求的非常接近。要使工具提示正常工作，您需要对父行进行z索引。

但是，这样做意味着当您单击roe 3时遇到不同的问题，然后将鼠标悬停在第4行或第5行上。然后在静态工具提示上有一行。

更改标记的最佳选择是在用户点击它时让工具提示保持打开状态，但是当它们悬停在另一个元素上时隐藏静态工具提示。这意味着他们一次只能打开一个工具提示，但这意味着你不会遇到上述问题。