在悬停锚标记上显示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

最好将块级元素保留在内联元素之外。所以，试着将DIV保持在A之外。

这是demo：

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