Question

我认为我已经忘记了我的CSS，但我遇到了问题

这是我的代码

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

问题在于，当我使用css代码： - website_logo_to_footerexpand：hover~.info_cont它会显示div但是只要我将鼠标移动到info_cont div就会消失

和代码.website_logo_to_footer_expand：hover＆gt; .info_cont根本不起作用

我的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/

请检查演示。

.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

你应该将悬停放在.footer_container而不是.website_logo_to_footer_expand该类位于左侧，当你向外滚动时，信息将会消失

.footer_container:hover > .info_cont

您还需要添加clearfix，因为您在.footer_container

中有浮动元素

Answer 3

你应该使用display:block;为浮动子div和display:inline-block;作为父div，然后悬停效果将起作用

当徘徊另一个div时div不显示

3 个答案: