javascript – 如何在使用时使用CSS定位div弹出窗口：悬停…？

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

HTML：

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下方.
最佳答案
认为你想要这样的东西：


.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/
                        
（编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!