如何让 div 的标题出现在另一个 div 的后面？

Question

所以我有一个 2 divs 结构：

<div class="div-front"></div>
<div class="div-behind1" title="@actualHeight1%" style="height:@actualHeight1%"></div>
<div class="div-behind2" title="@actualHeight2%" style="height:@actualHeight2%"></div>

本质上，我有一个 div (.div-front) 绝对定位在更高的 z-index 上，这样它就可以正确地堆叠在另外两个 div 的前面（ .div-在 1 和 2 之后）。这正是它需要的结构，所以我无法更改这部分的布局方式。

.div-behind1和2基本上是相互堆叠的条形图，代表不同的值，高度以百分比增加表示正在加载的数据。它还有一个标题，显示悬停的百分比。但是，由于这些在.div-front 后面，悬停时不会显示标题。

我不确定让这些标题显示的选项。任何帮助将不胜感激。

谢谢。

Answer 1

我认为你必须使用 javascript 函数和 css 一起来实现它。
添加moveOn函数和MoveOut函数覆盖Div，在moveOn函数中，获取title1和title2。在封面中创建新变量 div 并设置浮动位置以显示标题。

下面是部分代码，我没有全部完成。

<!DOCTYPE html>
    <html>
    <head>
    <script>
    function myFunction(e) {

        var title1 = document.getElementById("div-behind1");
        var title2 = document.getElementById("div-behind2");

        //add code to locate where you want to show the titles.
        //probably you need to create a new element like <span></span> with float and transpant preoperties in the cover div for showing titles. Set appropriate relative positions of two <span></span> is needed.

    }

    function clear(e) {
        //clear the titles.
        //simply empty the <span>
    }

    </script>
    </head>
    <body>

    <div onmousemove="myFunction(event)" onmouseout="clear()" class="div-front">abc <span id="s1"> </span></div>
    <div id="div-behind1" title="@actualHeight1%" style="height:@actualHeight1%">e</div>
    <div id="div-behind2" title="@actualHeight2%" style="height:@actualHeight2%">t</div>

    </body>
    </html>

Answer 2

我唯一能想到的 CSS 方法是创建 2 个空 div，并使 z-index 高于 div-front 并向它们添加 title .

<div class="div-front"></div>

<div class="div-above1" title="@actualHeight1%"></div>
<div class="div-above2" title="@ actualHeight2%"></div>

<div class="div-behind1" title="@actualHeight1%" style="height:@actualHeight1%"></div>
<div class="div-behind2" title="@actualHeight2%" style="height:@actualHeight2%"></div>

和CSS一样。

.div-above1 {
    height: /*tall enough to cover the chart*/
    width: /*same as the div-behind1 */
    z-index: /*higher than div-front*/
}

对另一个做类似的事情。

如何让 div 的标题出现在另一个 div 的后面？

How to make a div's title appear when it is behind another div?

html

css

razor