Question

如何将div显示为由另一个div内部的div悬停的叠加层。这是我尝试将div显示为覆盖框

的示例代码

CSS

   /*This is container Div */
    #one{
    position:absolute;
    background-color:#999;
    width:200px;
    height:200px;
    z-index:1;
    }

    /*This is Hovering Div which is inside container Div:*/
    #oneone
    {
    position:absolute;
    background-color:#fff;
    width:50px;
    height:50px;
    left:100px;
    top:90px;
    z-index:5;
    }

    /*This is the Overlay Div*/
    #two{
    position:absolute;
    background-color:#000;
    width:200px;
    height:200px;
    left:200px;
    top:290px;
    z-index:20;
    display:none;
    }

    /*This is the Div displays after Hovering*/
    #oneone:hover #two{
    display:block;
    }

HTML

    <div id="one">
    <div id="oneone"></div>
    </div>

    <div id="two">
    </div>

请帮忙..先谢谢。

Jfiddle：http://jsfiddle.net/stylerkishore/DySxJ/

Answer 1

尝试以下代码 -

<div id="one">
<div id="oneone" onmouseover="javascript:var mydiv = document.createElement('two'); "><div id="two"></div>
</div>

您需要在css中编辑#two以显示其正确的位置

JSFIDDLE

Answer 2

我为你创建了一个jsfiddle

我修改了一下html，以便#oneone和#two至少是同一容器中的兄弟姐妹

<div id="one">
    <div id="oneone"></div>
    <div id="two"></div>    
</div>

我也改变了css选择器

#oneone:hover + #two {
    display:block;
}

如何将div显示为由另一个div内的div盘旋的叠加？

2 个答案: