How to display a div as overlay which is hovered by a div which is inside another div?

Question

How to display a div as overlay which is hovered by a div which is inside another div. This is the sample code which I tried to display the div as overlay box

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>

Pls help.. thanks in advance.

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

It is recommended to create a http://jsfiddle.net/ for something you have troubles with working so others can help you faster. @dwhite.me hi5 — Ms. Nobody, Jul 09 '14 at 07:49
#oneone:hover #two -- here you asume that #two is inside #oneone, but it is not — florin.prisecariu, Jul 09 '14 at 07:50
To Florin.prisecariu: I need to show a div outside of the one and oneone. So I shown it out. — Styler Kishore, Jul 09 '14 at 07:52

score 1 · Answer 1 · answered Jul 09 '14 at 07:56

1

Try following code -

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

You will need to edit #two in css to show it's proper position

JSFIDDLE

answered Jul 09 '14 at 07:56

Dr Manish Lataa-Manohar Joshi

2,380
5
17
38

div 'two' should be out of the div 'one' and 'oneone'. Pls. – Styler Kishore Jul 09 '14 at 08:05
there is no way to select a parent div with css selectors , more on http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector – florin.prisecariu Jul 09 '14 at 08:39

score 1 · Accepted Answer · answered Jul 09 '14 at 07:57

1

i created a jsfiddle for you

i modified a bit the html, so that #oneone and #two to be at least siblings in the same container

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

also i changed the css selector

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

answered Jul 09 '14 at 07:57

florin.prisecariu

422
3
8

I tried it was working. But div 'two' should be out of the div 'one' and 'oneone'. Pls. – Styler Kishore Jul 09 '14 at 08:06
you may need to use js to select parent containers... the css selectors work on children (>) or siblings (+), but not on parents – florin.prisecariu Jul 09 '14 at 08:17

How to display a div as overlay which is hovered by a div which is inside another div?

2 Answers2