CSS Z-Index:如何在父级的兄弟姐妹上方显示元素?(并且有父母以上的表弟）

CSS Z-Index: How to show element above parent's sibling? (and have cousin above parent)

本文关键字：元素 父母 Z-Index 显示 兄弟姐妹 CSS 方显示      更新时间：2023-09-26

我有这个项目：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');
    }
});

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

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 行上时，您会遇到不同的问题。然后，静态工具提示上有一行。

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

相关文章：