懸停時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/