Question

所以我有一个2 div结构：

<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-behind1＆amp; 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的标题出现？

2 个答案: