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


Tags: html,css,css3

Problem :

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/



Solution :

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

    CSS Howto..

    how to get fixed header with css?

    How could I achieve the same navigation using CSS3? (currently flash AS3)

    How to selectively load/use CSS for YUI modules?

    how to switch to another view using css class on click in angularjs using ngclass

    How can I line up the two containers in view?

    How to use ASP.NET Authorization Yet Permit Access to .css Files?

    How to make transparent corners of borders for a perspective effect?

    How to place two section elements next to each other using CSS? [duplicate]

    How to set continuous box-shadow through all inline-block centered li elements

    How to ensure both scale and slide up can occur for dynamic text using css and js?

    How to sequentially animate menu elements

    How can i select the div from CSS?

    How can I make the CSS-hover animation to stay?

    How to make a website to occupy the entire element?

    Unicode character, down triangle, shows up as strange text

    how to place the images exactly in menu position

    How to vertically align both image and text in a DIV using CSS?

    How to create a 3 section's in a row inside the colophon footer (wordpress)

    How to select child element inside first, second or third html element with CSS classes?

    How do i shrink my link menu

    How to ignore parent css style

    How to define dynamic height in css (or html)?

    How to create a dropdown menu like google's 'More' button?

    How Polymer Hero Transition works

    How to fill a rectange from center html , css

    How to add bold text with CSS? [duplicate]

    How to customize ionic style components (lists and tabs with different shapes)

    How to get the initial value of style properties in javascript? [duplicate]

    how to achieve this effect with css html?

    How can I get Sitecore Field Renderer to use a css class for an image