使用时如何使用CSS定位div弹出窗口:悬停...？

Question

我正在尝试在CSS中创建一个弹出窗口.在这种情况下,它是一个小div,包含标记您正在悬停的图像的文本.但是,我肯定做错了.我要么在CSS中定位:hover div错误(我尝试了不同的位置(固定,绝对,浮动,清除等),但它一直显示在主div内.我可能错误的我的HTML,因为我将它放在你为了弹出窗口而悬停的主div中.但我认为当你悬停主div时它必须出现在那里.任何帮助都表示赞赏.代码如下:

HTML:

<div class="topIcons topIconsHover topLabelHover">
    <a href="image.html"><img src="icons/image.png" /></a> 
    <div class="topLabelHover">Image</div>  
</div>  

CSS:

.topIcons {
    padding:14px 6px 10px 6px;
    float:right;
 }

.topIconsHover:hover {
    background-color:#555555;
    cursor:pointer
}

.topLabelHover:hover {
    background-color:#555555;       
    width:80px;
    height:24px;
    position:fixed;
        top:40px;
}

如果有必要,我可以使用JavaScript(或JQuery),但它看起来像CSS一样简单.另外,在可能的情况下使用CSS而不是JavaScript(或Jquery)会更好吗,因为它可能更快？我可能会在那里弄错,但会对最佳实践感兴趣.

编辑*仍然有问题,所以我想进一步解释我正在尝试用我的页面布局,也许它会有所帮助.我在导航栏中有一系列图标,都是向右浮动的.在悬停时,我希望更改背景(我在CSS中使用"topIconsHover"类进行管理)以及"标签"div在悬停时显示在导航栏中相关的悬停图标div下方.

Answer 1

认为你想要这样的东西：

.topIcons {
    padding:14px 6px 10px 6px;
    float:right;
 }

.topIconsHover:hover {
    background-color:#555555;
    cursor:pointer
}

.topLabelHover {
    display:none;
}

.topIconsHover:hover .topLabelHover {
    display:block;
    position:absolute;
    background-color:#555555;       
    width:80px;
    height:24px;
    top:40px;
}

http://jsfiddle.net/kHPZK/