懸停錨標記的顯示div

Question

我想顯示一個使用css懸停錨標記的div。以下是我的html代碼

<td class="cellStyle"> 
<a href="#" class="linkStyle"> 
    <div>Home</div> 
    <div style="display:none;">I'm here... (some html) </div> 
</a></td> 

請告訴我如何我可以實現這個使用CSS。

感謝

Answer 1

給你隱藏的div類：

<td class="cellStyle"> 
<a href="#" class="linkStyle"> 
    <div>Home</div> 
    <div class="demo">I'm here... (some html) </div> 
</a></td> 

，並使用這些樣式：

<style> 
a.linkStyle div.demo { display:none; } 
a.linkStyle:hover div.demo { display:block; } 
</style> 

工作的jsfiddle：http://jsfiddle.net/6pB8G/

Answer 2

how to make sub menu appear when hover over link?

CSS

a.linkStyle:hover div.here { 
    display:block; 
} 

div.here { 
    display : none; 
} 

HTML

<a href="#" class="linkStyle"> 
    <div>Home</div> 
    <div class="here">I'm here... (some html) </div> 
</a> 

（由一類的div將被隱藏第一）

JSFIDDLE DEMO

Answer 3

試試這個：

CSS：

.hiddendiv {display:none;} 
.linkStyle:hover > .hiddendiv { display:block; } 

HTML：

<a href="#" class="linkStyle"> 
    <div>Home</div> 
    <div class="hiddendiv">I'm here... (some html) </div> 
</a> 

這裏是一個工作demo

Answer 4

這是更好地保持塊級別從內聯元素外部因素。因此，嘗試從A

這裏外保持DIV的演示：

HTML

<td>  
    <a class="tooltip">Home</a> 
    <div class="tip">I'm here... (some html)</div> 
</td> 

CSS：的

.tip{display:none} 
.tooltip:hover + .tip{display:block} 

Working Demo