Fatal编程技术网
  • html/
  • Html 如何制作div'；当它位于另一个div后面时，是否会显示其标题？

Html 如何制作div'；当它位于另一个div后面时，是否会显示其标题？

html css razor

Html 如何制作div'；当它位于另一个div后面时，是否会显示其标题？,html,css,razor,Html,Css,Razor,所以我有一个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%"></di

所以我有一个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索引，这样它就可以正确地堆叠在另外两个div（.div-behind1&2）的前面。这就是它需要的结构，所以我不能改变这部分的布局

.div-behind1和2基本上是彼此堆叠的条形图，重新呈现不同的值，高度以百分比增加以表示加载的数据。它还有一个标题，显示悬停时的百分比。但是，由于它们位于.div前面的后面，所以悬停时不会显示标题

我不确定是否可以选择显示这些标题。任何帮助都将不胜感激

谢谢。

我认为您必须同时使用javascript函数和css来实现它。
添加moveOn函数和MoveOut函数来覆盖Div，在moveOn函数中，获取title1和title2。在cover 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>


函数myFunction（e）{
var title1=document.getElementById（“div-behind1”）；
var title2=document.getElementById（“div-behind2”）；
//添加代码以定位要显示标题的位置。
//可能您需要在封面div中创建一个新元素，如float和transpant属性，以显示标题。需要设置两个元素的适当相对位置。
}
功能清除（e）{
//清除标题。
//只需清空
}
abc
E
T
我唯一能想到的CSS方法就是创建两个空div，并使
z-index
高于
div-front
，然后将
标题添加到它们上面


<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>



对另一个分区执行类似的操作。
这对您来说很困难，因为z索引没有帮助，因为标题将是后面分区的子分区，因此即使它们的z索引高于前面分区，也不会覆盖它，因为它尊重父分区。您可以制作一个可以用于实验的小提琴吗？或者您可以使用一些jQuery让鼠标悬停在父对象之外的一个新div中实际创建标题，这样您就可以应用z-index了。没有代码就很难说了。我唯一关心的是使用jQuery在很多时候不能很好地处理导入的数据，最后我不得不设置一个超时，这可能会导致问题。您实际上试图解决的问题是什么，只是为了获得悬停时显示的百分比？我不明白为什么JS/jQYes会有问题，我正试图让它在hover上显示标题，但是在其余部分前面的div会阻止它。我现在正在玩JS/jQ解决方案。这可能已经够疯狂的了。我要试一试。谢谢刚刚测试过这个…如果只有一个条形图，它会工作得很好，但由于有多个堆叠在彼此的顶部，它只在悬停时显示其中一个标题。这不是我最终使用的解决方案，因为它在我的情况下不起作用，但我不妨给某人打分。谢谢！我将尝试来自用户sdcr的仅CSS的建议，但如果不起作用，我将尝试这个。祝你好运。我想看看您对用户scdr的体验，以前从未使用过它。

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