我正在尝试在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;
}
原文链接：https://www.f2er.com/html/425810.html