div not displaying when hovered another div

Question

i think that i have forgotten my css but i have a problem

here is my code

   <div class="footer_container">
     <div class="website_logo_to_footerexpand"></div>

     <div class="info_cont">
       <div class="info_slide_arrow"></div><!--arrow-->

       <div class="info_slide">
         <div class="level1">&copy; Datacardz.Inc <?php echo date('Y'); ?></div>
         <div class="level2">
            <a href="" id="about" class="href_link">About</a>
            <a href="" id="terms" class="href_link">Terms</a>
            <a href="" id="corporate" class="href_link">Company</a>
           <a href="" id="blog" class="href_link">Blog</a>
        </div>
      </div>
    </div>

the problem is that when i use the css code:- website_logo_to_footerexpand:hover ~ .info_cont it displays the div but it vanishes as soon as i nove the mouse to the info_cont div

and the code .website_logo_to_footer_expand:hover > .info_cont does not work at all

my css ----

.website_logo_to_footerexpand{
float:left;
cursor:pointer;
background-image:url(data_cardz_imagesprites.png);
background-position:0 0;
width:60px;
height:60px;
}
.info_cont{
float:left;
height:60px;
opacity:0;
visibility:hidden;
}

.website_logo_to_footerexpand:hover ~ .info_cont{
visibility:visible;
opacity:1;
} 

Answer 1

http://jsfiddle.net/K4Mp4/1/

Check the demo please.

.website_logo_to_footerexpand{
float:left;
cursor:pointer;
background-image:url(data_cardz_imagesprites.png);
background-position:0 0;
width:60px;
height:60px;
}
.info_cont{
float:left;
height:60px;
opacity:0;
visibility:hidden;
}

.footer_container:hover > .info_cont{
visibility:visible;
opacity:1;
} 

Answer 2

you should be putting the hover on .footer_container not .website_logo_to_footer_expand that class is to the left so naturally when you scroll out of it the info will disappear

.footer_container:hover > .info_cont

you also need to add a clearfix because you are floating elements inside .footer_container

Answer 3

you should use the display:block; for floated child divs and display:inline-block; for the parent div then the hovering effect will work