悬停时CSS显示块

Question

我已经关注了HTML，div .info默认为display:none，我想在悬停时将其更改为display:block。我正在尝试以下CSS，但:hover不起作用。

HTML：

<div id="items"> 
    <div class="item"> 
     <a href="#"> 
      <div clas="info"> 

      </div> 
     </a> 
    </div> 
</div> 

CSS

#items .item a .info{ 
    display: none; 
} 

#items .item a .info:hover{ 
    display: block; 
} 

的jsfiddle： http://jsfiddle.net/qcDtF/

感谢。

Answer 1

你不能在不显示的东西徘徊。您可以改用opacity或visibility。 jsFiddle。

.info { 
    opacity: 0; 
} 

.info:hover { 
    opacity: 1; 
} 

或者，如果你真的想用display:none，然后给#items，.item，或者你的外a一组宽度和高度，并把:hover该元素上。 jsFiddle。例如：

#items{ 
    width: 20px; 
    height: 20px; 
} 


.info{ 
    display: none; 
} 


#items:hover .info { 
    display: block; 
} 

如果你想正确的width和height，您可以使用JavaScript/jQuery来获得的可见.info宽度/高度，隐藏.info，然后设置的#items高度/宽度那些值从.info得到。

Answer 2

你没有显示的信息内容及其不可能徘徊隐藏

，你可以这样做this

<div id="items"> 
    <div class="item"> 
     <a href="#">sd 
      <div class="info"> 
       asdf 
      </div> 
     </a> 
    </div> 
</div> 

CSS

#items .item a .info{ 
    display: none; 
} 

#items .item a:hover .info{ 
    display: block; 
} 

你不能做到这一点悬停，但你可以改变悬停的不透明度，所以感觉就像隐藏和显示用户@jeff gortmaker所说的

ASLO

，如果您有jQuery的作为选项，那么你可以做到这一点像

$('.info').hover(function() { 
    $(this).fadeTo(1,1); 
},function() { 
    $(this).fadeTo(1,0); 
}); 

jsFiddle

Answer 3

使用visibility而不是display：

#items .item .info { 
    visibility: hidden; 
} 

#items .item:hover .info { 
    visibility: visible; 
}​ 

http://jsfiddle.net/qcDtF/1/